目录
HTML:超文本标记语言,任何浏览器的支持直接解析该语言
一般都是用Edge或者Chrome对HTML进行解析
(在浏览器内使用F12可以打开开发者工具)
简介HTML代码:
注意如果已经在浏览器打开了某段HTML代码,之后又做出了修改,需要进行强制刷新或者在路径中添加参数的方式来运行新的代码,由于缓存的原因,普通的刷新并不能运行修改后的代码,一般强制刷新的快捷键是CTRL + R
添加参数是在原本的路径上以?为分隔符,后面随便命名一个参数进行赋值,这样再运行,浏览器就明白这不是原本的HTML代码
DOM树:
标签之间的结构关系称为DOM树:
注释:
结构是 的格式
各种标签:
分隔符标签:
<hr>只有一个开头标签:
标题标签:
<h1></h1>等,数字越大字体越小,该标签会自动换行
段落标签与换行标签:
注意新段落和换行在HTML中是有区别的,段落之间的空白属于段落间距,而换行产生的空白是在一个段落里面行与行之间的行间距
段落标签是<p></p>或者<p/>
换行标签是<br/>或者<br>
注意在HTML中文本之间多个空格只会被识别成一个空格,而多个空格的实现是使用转义字符
格式化标签:
字体加粗:<strong></strong>或者<b></b>
字体倾斜:<em></em>或者<i></i>
删除线:<del></del>或者<s></s>
下划线:<ins></ins>或者<u></u>
图片标签:
<img>一般搭配src使用<img src = "">
""内部填写图片的地址
地址的分类:
1.网络地址:只要由网络就可以访问,但是这样的代码耦合性较高,如果地址发生变动就会影响到网页效果
2.本地绝对地址:即绝地地址,一旦图片位置改变,则访问不到
3.本地相对地址:即html文件所在的目录下的位置 .表示当前目录 ..表示上一级目录,如果图片在当前目录的上上级目录可以表示为"../../dog.png"
图片还有一些其他属性:
alt: 替换文本,当文本不能正确显示的时候,会显示该替换文字
title:提示文本,鼠标放到图片上面会显示的文字
width/height:控制图片的宽度与高度,一般只会修改一个,图片会等比例缩放,不然图片会失衡
border:边框,参数是宽度的像素,但这一般是使用CSS来设定
超链接标签:
<a></a>
属性:herf:表示点击后跳转到哪个页面
target: 打开方式,默认是self即在本页面直接跳转,如果是blank就在新标签页打开
那么只要点击这个图片,就能在新的标签页中跳转到搜狗搜索网站
如果herf=""也就是什么也没有,这种情况下点击连接会进行刷新
如果herf="#"点击就不会有任何效果,是一个空连接,#是占位符
如果herf是一个zip或者rar或者7z后缀的地址,那么点击后就i可以下载这个压缩包
内部链接:
即在本页内快速跳转到目标区域
表格标签:
<table></table>表示整个表格
<tr></tr>表示表格的一行
<td></td>表示一个单元格
<th></th>表示表头单元格(会居中加粗)
<thead></thead>表格的头部区域(范围比th要大)
<tbody></tbody>表格的主体区域
单元格合并:
跨行合并:rowspan="n"
跨列合并:colspan="n"
要合并几个单元格,n就填几
列表标签:
无序列表:
最外层是<ul></ul>,每条是<li></li>
有序列表:
最外层是<ol></ol>每条是<li></li>
自定义列表:
最外层是<dl></dl>内部包含<dt></dt>和<dd></dd>其中<dt></dt>是标题
表单标签:
表单由两部分组成:
1.表单域(包含多个和表单组件)<form></form>
2.表单组件,所有的组件都写在form内部
form标签:
from标签自带两种特别的属性:
action:将表单提交到哪里
method:以何种方式提交表单
input标签:
input标签有很多属性:
type:(必须有)取值种类多,用于变换不同的组件(默认是文本框即text)
name:给input起名字,尤其对于单选按钮,具有相同的name才能实现多选一
value:input的默认值
checked:默认被选中,用于单选和多选按钮
maxlength:设定最大长度
(注意name 和 id 的区别:
1.name 可以重复,而id不可以重复
2.name主要给js使用,id主要给后端使用)
text | 文本框 | password | 密码框 | radio | 单选框 |
checkbox | 复选框 | button | 普通按钮 | submit | 提交按钮 |
reset | 初始化按钮 | file | 选择文件 |
label标签:
label标签并不常用,一般和单选框或者复选框一起使用,作用是点击label标签同时让该选项被选中
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
select标签:
下拉框标签:最外层是<select></select>,内部用<option></option>作为选项selected="selected"代表默认选项
textarea标签:
文本域标签
rows和cols两个属性来控制文本域的行和列,也就是控制大小,不过这两不会直接使用,一般是由css控制
无语义标签:
div:<div></div>一种布局方式,独占一行
span:<span></span>一种布局方式,不是独占一行
这两种标签没有实际意义,但是用于控制布局,可以用于控制不同的样式,比如修改字体颜色
HTML中特殊字符:
空格:
小于号:&t;
大于号:>
按位与:&