这是我参与「第四届青训营」笔记创作活动的的第一天

HTML常用汇总

[1.快速入门]

什么是HTML

HTML是一门语言编写网页的专用语言
HTML(HyperText Markup Language)：超文本标记语言

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

标记语言：由标签构成的语言

W3C 标准：网页主要由三部分组成

结构：HTML

表现：CSS

行为：JavaScript

HTML入门

HTML文件以.htm或.html为拓展名
HTML标签不区分大小写
HTML属性值单双引好均可以
HTML结构标签

标签	描述
< HTML>	定义HTML文档
< head >	定义关于文档的信息
< title >	定义文档的标题
< body >	定义文档的主体

[2.常用基础标签]

标签	描述
< h1 > - < h6 >	定义标题 h1最大 h6最小
< font >	定义文本的字体、字体尺寸、字体颜色
< b >	定义粗体字体
< i >	定义斜体字体
< u >	定义文本下划线
< center >	定义文本居中
< p >	定义段落
< br >	定义折行
< hr >	定义水平线

[3.超链接]

标签	描述
< a >	定义超链接用来链接到另一个资源

href: 指定访问资源的URL
target: 指定打开资源的方式

_self:默认值，在当前页面打开

_blank:在空白页面打开

 <!--    在新的空白页面打开该链接-->
<a href="http://www.baidu.com" target="_blank"> 百度</a>

超链接1.png

点击该链接即可跳转到百度页面

提示 "链接文本"不必一定是文本，图片或其他HTML元素都可以成为链接

[4.图片、音频、视频]

标签	描述
< img >	定义图片
< audio >	定义音频
< video >	定义视频

img ：图片

src :规定显示图片的url（统一资源定位符）

height: 定义图像的高度

width：定义图像的宽度
audio:定义音频

src :规定音频的url（统一资源定位符）

controls:显示播放控件
video: 定义视频

src :规定音频的url（统一资源定位符）

controls:显示播放控件

<!--   这是个音频  -->
<audio controls="controls">
   <source src="img/时光卷轴.mp3" type="audio/mp3" />
</audio>

<!--     这是个图片   -->
<img src="img/1.jpg" height="600">

 <!--     这是个视频-->
<video width="320" height="240" controls="controls">
   <source src="img/开心摇.mp4" type="video/mp4" />
</video>

图片视频音频2.png

[5.列表]

有序列表

<ol>
    <li>星期一</li>         
    <li>星期二</li>
    <li>星期三</li>
</ol>

有序列表.png

无序列表

<ul>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
</ul>

无序列表.png

标签	描述
< ol >	定义有序列表
< ul >	定义无序列表
< li >	定义列表项

[6.表单]

表单：在网页中主要负责数据采集功能，使用< form >标签定义表单
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等
form：定义表单

action：规定当提交表单时向何处发送表单数据，URL

method ：规定用于发送表单数据的方式

get：浏览器会将数据直接附在表单的 action URL 之后。大小有限制

post：浏览器会将数据放到http请求消息体中。大小无限制

表单.png

表单2.png

表单3.png

[7.表格]

标签	描述
< table >	定义表格
< tr >	定义行
< td >	定义单元格
< tn >	定义表头单元格

table:定义表格

border:规定表格边框的宽度

width:规定表格的宽度

cellspacing: 规定单元格之间的空白
tr：定义行

align: 定义表格行的内容对齐方式
td: 定义单元格

rowspan: 规定单元格可横跨的行数

colspan:规定单元格可横跨的列数

<table width="50%" border="1" cellspacing="0">
    <tr height="50">
        <th>序号</th>
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <tr align="center" >
        <td>010</td>
        <td><img src="img/小米.jpeg" width="60" height="50"></td>
        <td>小米</td>
        <td>小米科技有限公司</td>
    </tr>
    <tr align="center">
        <td>009</td>
        <td><img src="img/华为.jpeg"  width="60" height="50"></td>
        <td>华为</td>
        <td>华为科技有限公司 </td>
    </tr>
    <tr align="center">
        <td>008</td>
        <td><img src="img/vivo.jpeg" width="60" height="50"></td>
        <td>vivo</td>
        <td>vivo科技有限公司</td>
    </tr>
</table>

表格.png

[8.布局]

标签	描述
< div >	定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页
< span >	用于组合行内元素

从0开始的前端学习（一）|青训营笔记

HTML常用汇总

目录

[1.快速入门]

[2.常用基础标签]

[3.超链接]

[4.图片、音频、视频]

[5.列表]

[6.表单]

[7.表格]

[8.布局]