web前端学习第三天-HTML
标签
1.标签语义
2.表格标签
3.列表标签
4.表单标签
HTML结构
<head>
<meta charset="UTF-8"><!-- 字符编码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title><!-- 文件的名字 -->
</head>
<body>
<!-- 存放标签 -->
</body>
1.标签语义
如果想要了解标签是什么，首先要先了解单标签和双标签。
单标签：由一个<>组成，就叫做单表签。
例如：
<br/>
双标签：由一对<></>组成，<>为头，</>为尾，凑成一对，这种则为双标签。
例如：
<h1></h1>//这是双标签
还有一点就是标签属性，比如
<img src=”图像URL“/>//中的src就是属于img中的属性
常用标签：
1.标题标签
//标题标签，这是一种双标签
<h1>-<h6>
<h1>标题标签</h1>//级别最高
2.段落标签
//段落标签，可以把HTML文档分为若干个段落
<p>段落标签</p>
特点：
1.文本会根据浏览器的大小自动换行。
2.段落和段落之间会有缝隙。
3.换行标签
//换行标签,强制换行
<br/>
特点：
1.为一个单标签；
2.换行只是简单的开始新的一行，并不是跟段落标签一样，两段落留有间距
4.文本格式化标签
//文本格式化标签，突出重要性
<strong></strong> 或<b></b> //加粗
<em></em>或<i></i> //倾斜
<del></del>或<s></s> //删除线
<ins></ins>或<u></u> //下划线
5.盒子标签
//盒子标签<div></div> //用来布局，但是一行只能放一个这个标签。大盒子<span></span>//用来布局，一行可以有多个这种标签。
6.图像标签
//图像标签,也是一个单标签<img src="图像URL"/>
属性：
1.src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
2.alt是替换文本，图像不能显示的时候显示文字。
3.title是提升文本，鼠标放到图像上，显示文字
4.width是设置图像的宽度5.height是设置图像的高度6.border是设置图像的边框粗细
小插曲
路径：（路径分为绝对路径和相对路径）
相对路径：
同一级路径：图像文件位于HTML文件同一级 如<img src="baidu.gif"/>;
下一级路径：符号为（/），图像文件位于HTML文件下一级 如<img src="images/baidu.gif"/>;
上一级路径：符号为（../），图像文件位于HTML文件上一级 如<img src="../baidu.gif"/>;
绝对路径：
盘符上的路径：D:\web\img\logo.gif
网络上的路径：http://www.itcast.cn/images/logo.gif.
7.超链接
<a></a><a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性：
href：用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有超链接的功能；
target：用于指定链接页面的打开方式，其中_sef为默认值，_blank为在新窗口中打开方式。
小插曲
链接分类：
1.外部链接：例如<a href="http://www.baidu.com">百度</a>;2.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如：<a href="index.html">首页</a>3.空链接：如果当时没有确定链接目标时，例如：<a href="#">首页</a>4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。例如：<a href="img.zip">下载文件</a>5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。<a href="http://www.baidu.com"><img src="img.jpg"/></a>6.锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。-在链接文字的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>-找到目标位置的标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集介绍</h3>
HTML注释
<!--注释语句-->注释以"<!--"开头，以"-->"结束，快捷键为ctrl+/
特殊字符（就是一些特殊符合无法直接使用，我们可以用特殊字符代替）
//特殊字符1.空格符：代码 2.<小于号：代码<3.>大于号：代码>
示例代码：
<body>
<h1>1号标签</h1>
<h2>2号标签</h2>
<h3>3号标签</h3>
<br />
<em><strong>上下有一个换行标签,并且字体加粗,且倾斜。
</strong></em>
<br />
<p>这是一个段落标签</p>
<div>这是一个div的大盒子，一行只能放一个</div>
<span>这是第一个span的小盒子-----</span>
<span>这是第二个span的小盒子</span>
<br />
<img src="C:\Users\15343\Desktop\工作\aab.jpg" width=100px />
<br />
<a href=" http://www.baidu.com">这是一个超链接--百度</a>
前面有两个个空格符
</body>
运行结果：
2.表格标签
表格标签，表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好
1.<table></table>是用于定义表格的标签
2.<tr></tr>标签用于表格中的行，必须嵌套在<table></table>标签中。
3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4.字母td指表格数据，即数据单元格的内容。
//标签表格的头部区域<thead></thead>//存在于table中，更好的分清表格结构
//表格的主体区域<tbody></tbody>
//存在于table中，更好的分清表格结构//合并单元格跨行合并：rowspan="合并单元格的个数"跨列合并：colspan="合并单元格的个数"合并三部曲： 1.先确定是跨行还是跨列合并； 2.找到目标单元格，写上合并方式=合并的单元格数量。比如<td colspan="2"></td> 3.删除多余的单元格。
table中的属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式。 |
| border | 1或"" | 规定表格单元是否拥有边框，默认为"",表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认为1像素 |
| cellspacing | 像素值 | 规定单元格之间的间隙，像素默认为2 |
| width | 像素值或百分比 | 规定表格的宽度 |
示例代码：
<body>
<table border="1" align="center" width=500px cellspacing="0"><!-- 这里的align属性，是表格相对于浏览器页面的位置 -->
<thead>
<tr>
<!-- 表头单元格 -->
<th>111</th>
<th>222</th>
<th>333</th>
</tr>
</thead>
<tbody align="center">
<tr>
<!-- 表格单元格 -->
<td>444</td>
<td>555</td>
<td>666</td>
</tr>
<tr>
<!-- 表格单元格 -->
<td>777</td>
<td>888</td>
<td>999</td>
</tr>
<tr>
<td colspan="3">10</td><!-- 合并单元格 -->
</tr>
</tbody>
</table>
</body>
运行结果：
3.列表标签
无序列表
//无序列表（重点）
<ul></ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li></li>标签定义。
语法格式：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
1.无序列表的各个列表项之间没有顺序级别之分，是并列的。
2.<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
3.<li></li>之间相当于一个容器，可以容纳所有元素。
4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。
有序列表
//有序列表在HTML标签中，<ol></ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li></li>标签来定义列表项。
语法格式：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
1.<ol></ol>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2.<li></li>之间相当于一个容器，可以容纳所有元素。
3.有序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。
自定义列表
//自定义列表（重点）在HTML标签中，<dl></dl>标签用于定义描述列表（或定义列表），该标签会与<dt></dt>（定义项目和名字）和<dd></dd>（描述每一个项目/名字）一起使用。
语法格式：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
</dl>
1.<dl></dl>里面只能包含<dt></dt><dd></dd>.
2.<dt></dt><dd></dd>个数没有限制，经常是一个<dt></dt>对应多个<dd></dd>;
示例代码：
<body>
<ul>
<li>无序列表</li>
<li>派</li>
<li>大</li>
<li>星</li>
</ul>
<ol>
<li>有序列表</li>
<li>派</li>
<li>大</li>
<li>星</li>
</ol>
<dl>
<dt>自定义列表</dt>
<dt>游戏</dt>
<dd>让你兴奋的</dd>
<dd>让你刺激的</dd>
<dt>作业</dt>
<dd>让你痛苦的</dd>
</dl>
</body>
运行结果：
4.表单标签
在HTML中，一个完整的表单通常由表单域、表单控件（也称表单元素）、提示信息3个部分组成。
1.表单域
<form></form>标签用于定义表单域，以实现用户信息的收集和传递,会把它范围内的表单元素信息提交给服务器。
2.表单控件
2.1input输入表单元素（单标签）
//用于收集用户信息。在这个标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（文本、复选、单选）。
<input type="属性值" name=""/>
type的属性值
type=text（文本，默认问20字符）、password（密码，字符被掩盖）、radio（单选按钮）、
checkbox（复选框）、submit（提交按钮，会把数据发送到服务器）、
reset（重置按钮，清除表单中的所有数据）、button（可点击按钮、结合js启动脚本）、
file（供文件上传 ）
input标签的属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| name | 任意 | 这里单选按钮必须有相同的名字name，才可以实现多选一。单选按钮和复选框都要有相同的name值。 |
| value | 任意 | 规定input元素的值。（文本框初始的内容） |
| checked | checked | 规定此input元素首次加载时应当被选中，单选框和复选框可以设置这个属性，当页面打开时，默认选中这个按钮。 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度。用户可以在表单元素输入的最大字符数，一般较少使用。 |
2.2lable标签
用于绑定一个表单元素，当点击<lable></lable>标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
语法：
<lable for="sex">男</lable>
<input type="radio" name="sex" id="sex"/>
核心：for属性应当与相关元素的id属性相同。
2.3select下拉表单元素
//我们可以使用此标签来节约页面空间，来定义下拉列表
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
//最少要包含一对<option></option>
//在<option></option>中定义selected="selected"时，当前项即为默认选中项。（下拉表单默认显示为属性值selected="selected"）
2.4textarea文本域元素
//当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们就可以使用这个标签。可以定义多行文本输入。
语法：
<textarea rows="3" clos="20">
文本内容</textarea>//cols表示每行的字符数，rows表示显示的行数，我们实际开发中不会使用，都是用css来改变大小的。
示例代码：
<body>
<form>
<label for="zh">账号：</label>
<input type="text" id="zh" />
<label for="mm">密码：</label>
<input type="password" id="mm" />
<br />
<label for="sex_0">男</label>
<input type="radio" name="sex" id="sex_0" checked="checked">
<label for="sex_1">女</label>
<input type="radio" name="sex" id="sex_1">
<select>
<option>活泼的</option>
<option>努力的</option>
<option>安静的</option>
</select>
<br />
<textarea rows="3" cols="100">
算法（Algorithm）是指解题方案的准确而完整的描述，是一系列解决问题的清晰指令，算法代表着用系统的方法描述解决问题的策略机制。也就是说，能够对一定规范的输入，在有限时间内获得所要求的输出。如果一个算法有缺陷，或不适合于某个问题，执行这个算法将不会解决这个问题。不同的算法可能用不同的时间、空间或效率来完成同样的任务。一个算法的优劣可以用空间复杂度与时间复杂度来衡量。
</textarea>
</form>
</body>
结果如图：
1280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
