HTML--HTML学习笔记

本文链接： https://blog.csdn.net/qq_44779847/article/details/102742976

HTML5

内容标题 h1-h6 字体由大到小独占一行字体加粗上下外边距，align=“left/right/center”
段落标签 p 独占一行上下外边距
水平分割线 hr
换行 br
列表标签

无序列表： ul:type li
有序列表： ol:type start reversed li
定义列表： dl dt dd
列表嵌套：有序和无序可以任意无限嵌套

分区元素

div：块级分区元素独占一行
span：行内分区元素共占一行
h5: header article footer

元素分类

块级元素： div h1-h6 p hr
行内元素： span strong和b em和i del和s u

实体引用

空格
小于号 <
大于号 >

图片标签 img

src：路径
1. 相对路径：访问站内资源
  - 同目录直接写文件名
  - 上级目录 …/文件名
  - 下级目录文件夹名/文件名
2. 绝对路径：访问站外资源
  - 好处:节省本站资源
  - 坏处：有可能找不到图片
alt: 当图片不能正常显示的时候显示的文本
title: 鼠标悬停时显示的文本
width/height: 两种赋值方式 1. 像素 2. 上级元素的百分比

图片地图map

name唯一标识结合图片里面的usemap使用
子标签 area： shape（形状rect/circle） coords（坐标，矩形对角线点的坐标，圆形圆心坐标+半径） href：资源路径，页面资源直接访问文件资源（能浏览则浏览不能浏览则下载）

超链接a

如果不写href属性则就是纯文本
target="_blank" 在新窗口中显示页面
a标签包裹文本是文本超链接包裹图片则是图片超链接
页面内部调转功能，如果目的地位置有元素则给元素添加id属性，如果没有元素则添加一个空的a标签作为锚，然后通过另外一个a标签跳转过去
```
  <a id="top"></a>
  <a href="#top">回到顶部</a>
```

###表格标签table

tr:table row td:table data th:table head 表头居中加粗
跨行：rowspan row(行)
跨列：colspan column（列）
caption 表格标题
分组（分区）标签：thead tbody tfoot
###表单form
表单作用：获取用户的各种数据提交到服务器

form表单的各种控件：文本框、密码框、单选、多选、下拉选、文本域等

  <form action="http://www.tmooc.cn">
  <!-- name:对传递参数的介绍，如果不写则不会传递数据
  所有的控件都需要添加name属性 
  placeholder：占位文本 
  maxlength:最大字符长度
  value：修改文本框的值
  readonly： 只读 只能看不能改-->
  用户名:<input type="text" name="username"
  placeholder="请输入您的用户名"
  maxlength="5" value="xxx"
  readonly="readonly"><br>
  密码:<input type="password" name="password"
  placeholder="请输入密码"><br>
  <!-- 两个控件必须有相同的name
  	checked设置默认选中
  	value：设置提交的数据不写则提交的是on -->
  性别:<input type="radio" name="gender" 
  	checked="checked" id="m" value="m"><label for="m">男</label>
  <input type="radio" name="gender" id="f" value="f"><label for="f">女</label> <br>
  爱好:<input type="checkbox" 
  name="hobby" value="code" id="code">
  <label for="code">撸代码</label>
  <input type="checkbox" 
  name="hobby" value="wz" checked="checked">王者农药
  <input type="checkbox"
   name="hobby" value="gdx">搞对象<br>
   <!-- 隐藏域：当需要给服务器传递一个数据这个数据又
   不希望给用户看的时候使用隐藏域 -->
  <input type="hidden" name="xxx" value="yyy">
  <!-- 日期选择器 -->
  生日：<input type="date" name="birthday"><br>
  <!-- 文件选择器 -->
  靓照：<input type="file" name="pic"><br>
  所在城市:<select name="city">
  	<option>请选择</option>
  	<option value="bj">北京</option>
  	<option selected="selected">上海</option>
  	<option>广州</option>
  </select><br>
  自我介绍：<textarea rows="3" cols="20" 
  name="intro" placeholder="说点啥。。。"
  	></textarea><br>
  	
  <input type="submit" value="注册">
  <input type="reset" value="啦啦啦">
  <input type="button" value="自定义按钮">  
  </form>

猜你喜欢