简单使用HTML

目录

简介HTML代码:

DOM树：

注释:

各种标签:

分隔符标签:

标题标签:

段落标签与换行标签:

格式化标签:

图片标签:

超链接标签:

内部链接:

表格标签:

单元格合并:

列表标签:

无序列表:

有序列表:

自定义列表:

表单标签:

form标签:

input标签:

label标签:

select标签:

textarea标签:

无语义标签:

HTML中特殊字符:

---

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中特殊字符:

空格：&nbsp;
小于号：&t;
大于号：&gt
按位与：&amp;