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标签并不算是语义标签:他没有意义,只是一个链接。