目录

1.HTML的文件结构

2.标签层次结构

 3.常见标签

3.1标题标签

3.2段落标签

3.3换行标签、空格标签

 3.4格式化标签

3.5 图片标签

 3.6超链接标签

 4.表格标签

5.列表标签 

6.表单标签 

---

 

1.HTML的文件结构

直接输入 ！ + Tab键 可以快速生成文件结构

1.html 标签是整个 html 文件的根标签(最顶层标签)。

2.head 标签中写页面的属性。......

3.title 标签中写的是页面的标题.

4.body 标签中写的是页面上显示的内容。....

                    内容

2.标签层次结构

父子关系、兄弟关系

head 和 body 是 html 的子标签 (html 就是 head 和 body 的父标签 ) title 是 head 的子标签 . head 是 title 的父标签 . head 和 body 之间是兄弟关系 .

 标签之间的结构关系, 构成了一个 DOM 树，DOM 是 Document Object Mode (文档对象模型) 的缩写，如图1所示

 图1 DOM树

 3.常见标签

3.1标题标签

标题标签，有六个, 从 h1 - h6. 数字越大, 则字体越小。

 标题文字

其中？是1-6的数字，自己确定，“标题文字”是 自己要写的标题内容

                        
一级标题
    
二级标题
    
三级标题
    
四级标题
    
五级标题
    
六级标题
 --

 展示效果如图2

图2 标题 

 

3.2段落标签

形如 ：

段落内容

                    
第一段:我们都是热爱HTML的学生,立志用代码改善生活
    
第二段:CSDN是一个技术网站,在里面可以学到自己想要的技能
    
第三段:加入CSND吧,成为大家庭的一员,

展示效果如图3

图3 段落展示

 从效果图可以知道，段落不能首行缩进两字符，这需要我们添加 .... 标签，在标签里对 p 标签进行设置。效果如图4

p {    text-indent: 2em; }   

 图4 缩进字符

 

3.3换行标签、空格标签

br 是 break 的缩写 . 表示换行 .

br 换行标签，是单标签，即

br 标签不像 p 标签那样带有一个很大的空隙

 效果展示如图5

 

 图5 换行标签

 文字中的空格需要转义字符，&nbsp 。内容中的多个相连的空格会合成一个，需要多少空格就写多少个转义字符。

 3.4格式化标签

1.加粗: strong 标签 和 b 标签。...... .....

2.倾斜: em 标签 和 i 标签. ....  .  ......

3.删除线: del 标签 和 s 标签. .......   ......

4.下划线: ins 标签 和 u 标签. .......   .........

 代码方式如下

                       加粗    加粗   斜体   斜体   删除线   删除线   下除线   下划线

 效果图6所示

图6 格式化标签展示 

 

3.5 图片标签

img 标签必须带有 src 属性 . 表示图片的路径。 其中路径可以是绝对路径，从盘到文件夹再到图片，如 

 <img src="D:\网页\HTML\图片名.jpg">

 相对路径

要想把照片在网页中展示出来，就必须把照片路径和html文件放在同一级目录，如图7

图7 同级目录 

在img 标签中还可以添加其他属性，对照片进行调整

1.alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.

2.title: 提示文本. 鼠标放到图片上, 就会有提示.

3.width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.

4.border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

 效果如图8

 图8 照片展示

 3.6超链接标签

标签形如：

<a href = "网站地址" > 网站名

其中   href: 必须具备, 表示点击后会跳转到哪个页面.  target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

1.外部链接: href 引用其他网站的地址

如 CSDN入口

2.内部链接: 网站内部页面之间的链接. 写相对路径即可.

在一个目录中, 先创建一个 1.html, 再创建一个 2.html

<a href = "2.html" > 点我跳转到 2.html <a href = "1.html" > 点我跳转到 1.html 3. 空链接 : 使用 # 在 href 中占位 . 空链接是为了测试功能，不能跳转 <a href = "#" > 空链接 4. 下载链接 : href 对应的路径是一个文件 . ( 可以使用 zip 文件 )

<a href="test.zip">下载文件

5.网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

   

       

   

通过上述，进行代码使用

                       CSDN入口   
   html标签入口   
   空链接   
   下载链接   
      

 效果如图9

 图9 超链接效果图

 4.表格标签

基本使用

table 标签 : 表示整个表格 tr: 表示表格的一行 td: 表示一个单元格 th: 表示表头单元格 . 会居中加粗thead: 表格的头部区域 ( 注意和 th 区分 , 范围是比 th 要大的 ) tbody: 表格得到主体区域

table 包含 tr , tr 包含 td 或者 th. 表格代码展示

                     td{     text-align: center; }        
 
     
姓名
     
身高
 
 
     
王思
     
122
 
 
     
李思
     
130
 
 
     
三思
     
140
 
    

表格展示如图10

 图10 表格展示

5.列表标签 

 无序列表

   

       

• .....

       

• ......

       

• ......

   

有序列表

       

1. ......

       

2. .......

       

3. .......

   

 代码使用如下

                    
无序列表
    
 
司武安
 
因为过
 
趣味赛
    
    
有序列表
    
 
考得起
 
实际温
 
及全身
    

效果如图11

图11 列表图

6.表单标签 

表单域 : 包含表单元素的区域 . 重点是 form 标签 表单控件 : 输入框 , 提交按钮等 . 重点是 input 标签 .

要进行表单标签，需要把内容写入 form 标签中

<form action = "test.html" >   ... [form 的内容 ]

 input 标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

type( 必须有 ), 取值种类很多多 , button, checkbox, text, file, image, password, radio 等 . name: 给 input 起了个名字 . 尤其是对于 单选按钮 , 具有相同的 name 才能多选一 . value: input 中的默认值 . checked: 默认被选中 . ( 用于单选按钮和多选按钮 ) maxlength: 设定最大长度 .

1.文本框

<input type = "text" >

2.密码框

<input type = "password" >

3.单选框

<input type = "radio" name = "sex" > 男 <input type = "radio" name = "sex" checked = "checked" > 女

注意 : 单选框之间必须具备相同的 name 属性 , 才能实现 多选一 效果

4.复选框

<input type = "checkbox" > 看书 <input type = "checkbox" > 学习   <input type = "checkbox" > 完游戏

4.按钮

  <input type="button" value="网页提示" onclick="alert('空网页')">

使用如下

                      
 
   男   女  
    学习  看书  玩游戏  跑步 
       

 效果展示如图12

 图12 框展示

 5.选择文件

6.下拉菜单

 

           请选择年份

 

 代码的使用如下

                    
    请选择年份    1998    1999    2000    2001    2002    

 效果展示如图13

 

 图13 选择、下拉展示图

7.多行输入框

</p> </p> <p> 

安全期查询