2021-09-30 HTML入门之标签

··· 01-文本标签.html：

1、注释：

          Ctrl+Shift+?：添加注释 
           Ctrl+?：注释代码
           被注释的内容不予解析，也不会显示出来        

 2、标题标签：h1-h6

 字体都会加粗，字号依次从小到大，独占一行，自带上下间距，默认位置居左left，可以通过修改标签的align属性改变位置。
           align取值：左--left，中--center/middle，右--right
              <h1>标题1</h1>
              <h2 align="middle">标题2</h2>
              <h3 align="center">标题3</h3>
              <h4 align="right">标题4</h4>
              <h5>标题5</h5>

3、水平分割线：hr

hr是一个自闭和标签；
           效果：生成一行水平分割线。

 4、段落标签：p

 独占一行，自带上下间距

5、字体效果标签：

           加粗：b
           斜体：i
           换行：br
           下划线：u
           删除线：s
           小字：small

 6、空格标签：

           在html中，如果使用space键产生空格是不会累加的，无论按多少次，只算一个空格。
           1、不换行空格：&nbsp，是最常见的空格，相当于按下space键产生的空格。
           2、半角空格：&ensp，半角空格，等同于字体宽度的一半。
           3、全角空格：&emsp，全角空格，等同于字体宽度。
     

     
··· 02-列表标签.html：

 1、无序列表：ul（unordered list）

 2、列表项目：li（list item）

 3、有序列表：ol（ordered list）

 <ol type="1" start="4" reversed="reversed">
        ① type序号：1数字，A大写字母，I罗马数字，a小写字母，i小写罗马
        ② start起始：设置起始序号，从设定的序号开始排列
        ③ reversed翻转：顺序翻转，即倒序

4、列表嵌套：

即无序列表和有序列表嵌套使用，注意结束标签位置。
     
     

··· 03-图片标签.html：

 图片标签：img

   <img src="../Pictures/0924.jpg" width="500" height="500" title="抱羊"/>
         ① 路径：src 指定图片路径
             相对路径：访问站内资源时使用
             · 图片与页面在同一目录：直接写图片名（./图片名）
             · 图片在页面的上级目录：../图片名
             · 图片在页面的下级目录：目录名/图片名
             绝对路径：访问站外资源时使用
             · 这种叫做图片盗链，好处是节省本站资源，坏处是存在找不到图片的风险
         ② 宽：width
         ③ 高：height
             有两种赋值方式：
             · 直接写数字，单位为像素px
             · 百分比，相对于当前页面而言的百分比，如果只设置高，则宽等比例缩放
         ④ 文本：title 鼠标悬停在图片时显示的文本内容
         ⑤ 图片失效提示：alt 
             图片不能正常显示时，显示的文本
             如果能图片显示出来则不显示alt中的内容
        
             

··· 04-超链接标签.html：

超链接标签：a

<a href="http:www.baidu.com" target="_blank">百度一下，你就知道</a>
             ① 跳转：href 用于指定跳转的路径
                  · 如果herf指向的是文件，并且浏览器不支持浏览，则会触发下载
             ② 跳转并创建新页面：target 用于指定打开方式
                 · _self：默认值，在当前窗口打开连接
                 · _blank：在新窗口打开超链接
                 · _parent：在父框架集中打开被链接文档
                 · _top：在整个窗口中打开被链接文档
                 · framename：在指定的框架中打开被链接文档
             ③ 页面内部跳转：
                 · 跳转回页面顶部：href="#top"
                 · 跳转到指定位置：需要在目标元素的标签里添加id
                   <img src="../Pictures/0924.jpg" width="200px" id="sheep"/>
                   <a href="#sheep">回到小羊</a>

··· 05-音频和视频.html    

 1、音频：audio

 <audio controls src="../Pictures/七公主%20-%20우유쏭%20(牛奶颂).mp3">
             ① 设置路径：src
             ② 显示控件：controls 属性用于向用户显示控件
             ③ 自动播放：autoplay
      

 2、视频：video

<video controls src="../Pictures/狗狗顶球.mp4" width="50%" autoplay>     
             ① 设置路径：src
             ② 显示控件：controls 属性用于向用户显示控件 
             ③ 自动播放：autoplay

··· 06-表格标签.html

1、表格标签：table 用于定义一个表格

             ·边框属性：border 增加边框，设置粗细
             ·单元格间距属性：cellspacing 指定单元格间距
             ·内容边间距属性：cellpadding 指定单元格距离内容的间距

2、行标签：tr（table row）

3、列标签：td（table data）

             ·跨行属性：rowspan 设置需要跨几行，其余数据顺延
             ·跨列属性：colspan 设置需要跨几列，其余数据顺延

··· 07-表单标签.html

1、表单标签：form

用于定义表单，表单主要向浏览器提交数据
 ·路径属性：action 用于指定表单的提交地址（url）
 ·方式属性：method 用于指定表单的提交方式（get/post）
 ·编码属性：enctype 用于规定在发送到服务器之前应该如何对表单数据进行编码，共有三个属性值：
   1.application/x-www-form-urlencoded：在发送前对所有字符使用默认编码及进行编码，空格转换为+，特殊符号转换为ASCII HEX(十六进制)
   2.multipart/form-data：不对字符进行编码。在使用包含文件上传控件的表单时必须使用该值。
   3.text/plain：空格转换为+，但不对特殊字符进行编码。

 2、输入标签：input

 ·类型属性：type 输入的数据类型
         ① text：普通文本输入框
         ② password：密码输入框
         ③ submit：提交按钮，用于将表单中的数据提交到服务器中。
 ·名字属性：name 对于form表单中的表单标签们只要是需要向服务器提交数据，该表单项上必须添加name属性，否则在表单提交时，该项会被忽略。
 ·占位属性：placeholder 占位文本，填充提示
 ·长度属性：maxlength 限制输入框的最大长度
 ·默认值属性：value 设置默认值
 ·只读属性：readonly
 

3、标记标签：label

通常和input一起使用，为input标签定义标记。当用户点击lable标签中的文本时，浏览器会自动将焦点转到和改标签相关联的表单控件上。
                 ·标记标签属性：for 属性值应该和input标签中的id属性值相同
                 ·默认选择属性：checked 如果想设置某个标签默认被选中，就在当前标签上添加。

 4、下拉标签：select

下拉选中的每一个选项都是一个option，如果其中某一项被选中，并且该选项中添加了value属性，在提交表单时会提交value属性的值。如果没有添加value属性，则直接提交标签中的内容。
                 ·默认选择属性：selected 如果想设置某个标签默认被选中，就在当前标签上添加。        

 5、文本域标签：textarea

文本域中可以输入多行文本，文本框属于但行文本。

                 ·行属性：rows 即高度
                 ·列属性：cols 即宽度
                 ·占位文本：palceholder属性用于设置提示信息，需要注意的是在textarea标签内部不能有任何空格或者换行，否则不显示提示信息，直接显示标签内部内容。

6、按钮标签：button

自定义按钮标签

··· 07-表单练习.html

效果：

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卷卷的游戏账号</title>
	</head>
	<body>
		<form action="#" method="get">
			<table border="1" cellpadding="0">
				<tr >
					<td align="right" >用户名：</td>
					<td><input type="text" name="uname" placeholder="输入1-9位用户名"/></td>
				</tr>
				<tr >
					<td align="right" >密码：</td>
					<td><input type="password" name="upsw1" /></td>
				</tr>
				<tr >
					<td align="right" >&ensp;确认密码：</td>
					<td><input type="password" name="upsw2"/></td>
				</tr>
				<tr >
					<td align="right" >验证码：</td>
					<td><input type="text" name="code" /></td>
				</tr>
				<tr >
					<td align="right" >性别：</td>
					<td >
						<input type="radio" name="usex" value="man"/>男&ensp;
						<input type="radio" name="usex" value="woman" />女
					</td>
				</tr>
				<tr >
					<td align="right" >年龄：</td>
					<td><input type="number" name="uage"/></td>
				</tr>
				<tr >
					<td  align="right">爱好：</td>
					<td>
						<select name="hobby1">
							<option value ="studyjava" id="01">学习</option>
							<option value ="writecode" selected="selected" id="02">运动</option>
						</select>
						<select name="hobby2">
							<option value ="java">编程</option>
							<option value ="read">阅读</option>
						</select>
						<select name="hobby3">
							<option value ="sing">唱歌</option>
							<option value ="dance">跳舞</option>
						</select>
					</td>
				</tr>
				<tr >
					<td  align="right">擅长游戏：</td>
					<td>
						<input type="checkbox" name="game" value="JCC"/>金铲铲之战
						<input type="checkbox" name="game" value="WZRY"/>王者荣耀&emsp;
					</td>
				</tr>
				<tr>
					<td align="right" > 邮箱：</td>
					<td>
						<input type="email" name="umail"/>
					</td>
				</tr>
				<tr>
					<td align="right" > 邮箱密码：</td>
					<td>
						<input type="password" name="umpsw"/>
					</td>
				</tr>
				<td colspan="2" align="middle">
					<input type="submit" value="提交"/>&emsp;
					<input type="reset" value="重置"/>
				</td>
			</table>
		</form>
	</body>
</html>