首页 > 代码库 > html基础学习

html基础学习

2024-08-17 18:14:22   219人阅读

一、HTML概述

1.简介

HTML：Hyper Text Markup Language 超文本标记语言

注：“超文本”，就是指页面内可以包括除了文字以外的元素，如：图片、链接、音乐以及程序等。


2.特点

①使用标签来指明页面的不同内容。<head></head>

②平台无关性：HTML文档不含任何与平台和程序相关的信息，它们可以被任何文本编辑器读取。

注：HTML文档（也叫web页面），包含了HTML标签及文本内容。


二、HTML

1.基本结构

技术分享

2.基本标签

（1）文本

①标题：h1~h6
    eg. <h1>大家好~我是一级标题（最大）</h1>

②<font>标签 
    eg.<font size=6 face="黑体" color=red>欢迎光临我的主页</font>
   注：size只能设置七种字号

③<label>标签
    eg.<label for="name">用户名</label>
         <input type="text" id="name" name="name"/>
     注：for属性可以绑定一个控件，此标签，会将焦点转到绑定的控件上。

④格式标签
粗体：<b>…</b>
斜体：<i>…</i>
下划线：<u>…</u>
删除线：<strike>...</strike>
强调：<strong>…</strong>
下标：<sub>...</sub>
上标：<sup>...</sup>
   eg.<b>x+y=x<sup>2</sup><b/>

⑤<span>标签
    用来组合行内元素，span的前后不会换行。
   eg.<p>hello</p>
        <span style="color:red">*</span>

⑥段落标签
换行：<br/>
段落：<p>....</p>

⑦<div>标签
块级元素，div的前后会换行。
eg.
<div id="login">
<label for="username">用户名</label><input type="text" id="username"/>
<span style="color:red"> * </span>
<br/>
<label for="psd">密&nbsp;&nbsp;码</label><input type="password" id="psd"/>
<span style="color:red">*</span>
</div>
<div id="tip" style="font-size:12px;">
说明：用户名和密码必填
</div>

（2）图片

<img src=http://www.mamicode.com/"url" width="宽度值（单位：像素点）" height="高度值" alt="说明（链接不存在时的显示）">
eg.<img height="75px" width="311px" alt="wust" src=http://www.mamicode.com/"http://www.wust.edu.cn/images/141638742011865585.png">
注：可以修改src后看alt的功能。

（3）超链接

<a href=http://www.mamicode.com/"url">链接文字
eg.
<a href=http://www.mamicode.com/"http://www.wust.edu.cn">武汉科技大学
<a href=http://www.mamicode.com/"E:/KwDownloadx/mp3/your bag.mp3">音乐
<a href=http://www.mamicode.com/"E:/娱乐/搞笑/flash/交通安全.swf">动漫

（4）列表

①无序列表（没有序号，用其他符号表示）
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>

②有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

（5）表格

技术分享
技术分享

（6）特殊标签

由于大于号与小于号与标签的符号有歧义，不可用，故而有特殊标签。
HTML注释为：<!--注释内容-->
技术分享

3.Form表单

（1）介绍

 form：为用户输入创建表单。
其中可包括文本框、密码框、单/复选框、列表框、按钮等。
表单通常用于向指定的URL提交用户数据。

（2）基本结构

技术分享

（3）常用元素

①文本框、密码框
技术分享
②单/复选框
技术分享
技术分享
③列表框
技术分享
默认单选，多选：添加属性mutiple:multiple

④文件域
技术分享
⑤文本区域
技术分享
⑥提交和重置按钮/一般按钮/图片按钮
技术分享
技术分享
技术分享
⑦fieldset标签：将表单内的相关元素分组
技术分享

三、FAQ

1.id与name的区别

An:   id唯一，name可重复。用途不同。
name用途：

用途1:作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。

用途2:HTML元素Input type=‘radio‘分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。

 用途3: 建立页面中的锚点，我们知道<a href=http://www.mamicode.com/"URL">link是获得一个页面超级链接，如果不用href属性，而改用Name，如：，我们就获得了一个页面锚点。

用途4:作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。

用途5: 在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。

用途6: 某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = http://www.mamicode.com/"value">或Meta中<meta NAME>


2.div标签的理解

div标签用于划分一块区域，然后CSS等用于对于块内的填充。可以div中嵌div
eg.一个例子，修改其中的一些值，去理解这个布局。此处只列出body部分的语句。
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left">
<b >菜单</b><br>
HTML<br>
CSS<br>
JavaScript<br>
</div>

<div  id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容内容在这里
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center">哈哈哈
</div>

</div>


html基础学习


联系
我们