web前端——HTML

c:client  客户端

b：browser  浏览器

s：server     服务器

查询地址：MDN

html:

超文本标记语言，描述网页的语言

超---------不仅有文字，还有图片、音频、视频等等

---------可以从一个页面跳转到另外一个网页（超级链接文本）

文本：

标记：文本要变成超文本，就需要各种标记符号

语言：每一个标记的写法、读音、使用规则，构成标记语言

基本结构标签：

标签：

双标签;包含关系（父子标签 ）、并列关系（兄弟关系）

单标签：<br/>   h5可以不添加/     <input/>

双标签：<strong> 开始标签   </strong> 结束标签

单标签 ：<br/>

常用标签：

文本格式化标签：在网页中，为文本设置加粗、倾斜、删除线、下划线

加粗、倾斜

图像标签：

路径：

目录文件夹：普通文件夹，里面存放做页面需要的相关素材

根目录：打开目录文件夹后的第一层

绝对路径:图片在电脑的位置（了解）、、、、、网络中的绝对地址

 相对路径   上级   同级  下级    图片相对于html页面的位置

img：可以放在a标签里，成为图像超链接

图片标签常用属性：

Width：

height：一旦设置，浏览器就会预留空间， 设置一个，自动按比例改另外一个

align：图片与文字对齐方式

音频标签：audio

视频标签：Video

controls ：表示显示播放器的组件，一般视频肯定要显示的，音频根据情况，如果是背景音乐的话， 就不用显示。

autoplay： 表示自动播放，只要支持h5标准的浏览器都支持这个属性。

链接标签：a  anchor锚

外部链接  http://

文本超链接：创建两个html文件，进行连接跳转<a  href=""  target="_blank":在新窗口打开></a>

target：默认值是self

1. 锚链接：通过id名跳转到本页面指定位置
2. 图片超文本链接;img放在a标签内容部分

热区超链接：一个图片添加多个连接

img：添加usemap=“#Map”

<map name="Map">

<area shape="rect" coords="456,251,485,319" href="shaanxi.html">

</map>

邮件链接：         

<a href="mailto:contact@example.com">联系我们</a>

使用mailto协议

特殊符号标签：

列表：

使用场景：内容规整的，用列表

                先后顺序排序

                 自定义列表

有序列表（理解）

Ol>li   

<ol>

<li type="1">数字：1</li>

<li type="a">小写字母a</li>

<li type="A">大写字母a</li>

<li type="i">小写字母i</li>

<li type="I">大写字母I</li>                                                        

<li type="1">数字：6</li>

</ol>

无序列表

ul>li

ul里只能放li   无序列表整体

li里边随便放   无需列表中的一项

无序列表

<ul>

<li type="circle">空心圆circle</li>

<li type="disc">实心圆disc</li>

<li type="square">实心方块square</li>

</ul>

1.无序列表需要两个标签参与，分别是<ul>和<li>;
ul：unordered list，表示定义一个无序列表的大结构;
li：list item，列表项，定义的是无序列表内的某一项;
2.<ul>和<li>是嵌套关系;
3.一个列表中可以有任意个列表项。

<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ul>

注意：<ul>内部只能嵌套<li>，<li>标签不能脱离<ul>单独书写

自定义列表（重要）

dl>dt>dd

H5:一个dl可有多个dd

表格

 Width  height   ：  n    m%：相对表格所在容器的百分比

align：表格对齐方式left    center    right

valign :表格垂直对齐方式

border：边框

bgcolor：表格的背景

background：背景图片   平铺整个表格    建议相对路径

边距  cellpadding=”10“  单元格与边框之间

间距   cellspacing=”0“单元格与单元格之间

 tr：行

       height     bgcolor

td： 单元格

     height（与行高谁高用谁）      width

表格嵌套：以前用表格来布局，现在基本不用

跨行：<td  rowspan="">

跨列：<td   colspan="">

合并单元格三步曲·

1．先确定是跨行还是跨列合并。

2．找到目标单元格．写上合并方式=合并的单元格数量。比如：<tdcolspan="2"></td>

3．删除多余的单元格。

表单

表单元素有三大类

input 文本框

select 选择框

textarea 文本域     resize:文本区域是否可以调整大小

新增的input类型：验证的时候必须添加form表单域，点击提交按钮才能验证表单

 <form action="#">

        <input type="email" name="email" id="">

        <button>提交</button>

 </form>

H5新增的表单属性：

- `<input type="text">`: 单行文本输入框，用于输入用户名和邮箱等信息。

- `<input type="password">`: 密码输入框，用户输入密码时不会显示明文。

- `<input type="radio">`: 单选框，可供用户选择性别。

- `<select>`和`<option>`: 下拉列表框，用于选择年龄段。

- `<input type="file">`: 文件上传框，可用于上传头像等图片。

- `<input type="checkbox">`: 多选框，可供用户勾选爱好。

无语义标签

div: 分区 结合css页面布局 双标签、独占一行

<div>

 我是div标签

</div>

span: 文本标签 双标签、在一行展示

<span>

我是span标签

</span>

a 标签 ：用于控制页面之间跳转 a标签并不算是语义标签：他没有意义，只是一个链接。