【前端入门】HTML5
一、基础概念
W3C标准：
结构化标准语言——HTML,XML
表现标准语言——CSS
行为标准——DOM,ECMAScript
行内元素和块元素
块元素：总会另起一行放内容的
行元素：可以好多元素放在一行内的
二、页面结构
| 结构 | 用途 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚步部区域的内容（用于整个页面或页面中的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
三、基本标签
| 标签名 | 用途 |
|---|---|
| DOCTYPE | 告诉浏览器我们要使用什么规范 |
| head | 网页头部 |
| body | 网页主体 |
| title | 网页标题 |
| meta | 描述性标签，用来描述网站的一些信息,一般用来做SEO |
四、常用标签
一般标签：
| 标签名 | 介绍 |
|---|---|
| h1 | 一级标签 |
| h2 | 二级标签 |
| h3 | 三级标签 |
| h4 | 四级标签 |
| h5 | 五级标签 |
| h6 | 六级标签 |
| p | 段落标签 |
| stronger | 粗体 |
| em | 斜体 |
自闭合标签：
| 标签名 | 介绍 |
|---|---|
| hr | 分割线标签 horizontal rule |
| br | 换行标签 |
字体样式标签
五、其他标签
1、图像标签
常见的图像格式 JPG、GIF、PNG、BMP······
<img src="路径（必填）" alt="加载不出来提示文字（必填）" title="鼠标悬停文字" height="高度" width="宽度">
2、超链接标签
target属性： _blank:新建标签页 _self:当前标签页（默认）
<a href="链接路径（必填）" target="目标窗口位置"> 链接文本或图像 a>
（idea路径自动补全插件：File Path Autocomplete）
锚链接
<a name="标记名">a>
<a href="#标记名">a>
3、邮箱标签
可以发邮件到目标邮箱
<a href="mailto:邮箱地址">a>
4、视频标签
src路径（必填） controls开启控制台 autoplay自动播放
<video src="路径" controls autoplay>video>
5、音频标签
src路径（必填） controls开启控制台 autoplay自动播放
<audio src="路径" controls autoplay>audio>
6、内联框架
src:路径（必填） frameborder:边界值 name:名字 height:高度 width:宽度
<iframe src="路径" frameborder="边界值" name="名字" height="高度" width="宽度">iframe>
7、表单
action:数据发送地址，可以是网站，也可以是一个请求处理地址（必填） method:post/get
<form action="地址" method="方式">
8、下拉框
checked默认选择
<select name="名字"><option value="选项对应的值" selected>option>
select>
9、增强鼠标可用性标签
增强鼠标的可用性，点击标签相当于点击指定元素。
<label for="元素id">label>
六、input标签
因为这个标签比较多，所以单独拎出来。
type:文本类型（必填） name:文本名 value:初始值 maxlength:最大文本长度 size:输入框大小
<input type="文本类型" name="名字" value="显示文本" maxlength="长度" size="大小">
| 文本类型 | 组件名 |
|---|---|
| radio | 单选框（用name属性分组，checked默认选中） |
| checkbox | 复选框（checked默认选中） |
| button | 按钮 |
| image | 图片按钮（有提交功能） |
| submit | 提交 |
| reset | 重置 |
| file | 文件域 |
| 邮箱地址输入框 | |
| url | url输入框 |
| range | 滑块 |
| search | 搜索框 |
七、特殊符号
| 符号 | 代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| © | © |
八、列表和表格
1、有序列表 ordered list
<ol><li>li>
ol>
2、无序列表 unordered list
<ul><li>li>
ul>
3、自定义列表 definition list
dt:definition term dd:definition description
<dl><dt>dt><dd>dd><dd>dd>
dl>
4、表格table
tr:table rows td:table data
colspan跨列 rowspan跨行
<table border="1px"><tr><td colspan="3">1-1td>tr><tr><td rowspan="2">2-1td><td>2-2td><td>2-3td>tr><tr><td>3-2td><td>3-3td>tr>
table>
九、标签的一些其他属性
以下字段都是加在其他的标签里的，不是单独用的。
| 字段 | 用途 |
|---|---|
| readonly | 只读 |
| disabled | 禁用 |
| hidden | 隐藏 |
| required | 非空 |
| placeholder=“内容” | 提示语 |
| pattern=“re表达式” | 自定义规范 |
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！