HTML的基本使用

目录

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

 图4 缩进字符

 

3.3换行标签、空格标签

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

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

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

 效果展示如图5

 

 图5 换行标签

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

 3.4格式化标签

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

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

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

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

 代码方式如下

    
    
    
    


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

 效果图6所示

图6 格式化标签展示 

 

3.5 图片标签

img 标签必须带有 src 属性 . 表示图片的路径。

其中路径可以是绝对路径，从盘到文件夹再到图片，如 

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

 相对路径

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

图7 同级目录 

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

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

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

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

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

 效果如图8

 图8 照片展示

 3.6超链接标签

标签形如：

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

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

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

如 CSDN入口

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

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

href = "2.html" > 点我跳转到 2.html

href = "1.html" > 点我跳转到 1.html

3. 空链接 : 使用 # 在 href 中占位 . 空链接是为了测试功能，不能跳转

href = "#" > 空链接

4. 下载链接 : href 对应的路径是一个文件 . ( 可以使用 zip 文件 )

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

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

   

       

   

通过上述，进行代码使用

    
    
    
    


    
   CSDN入口
   

   html标签入口
   

   空链接
   

   下载链接
   

   
       
   

 效果如图9

 图9 超链接效果图

 4.表格标签

基本使用

table 标签 : 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

th: 表示表头单元格 . 会居中加粗

thead: 表格的头部区域 ( 注意和 th 区分 , 范围是比 th 要大的 )

tbody: 表格得到主体区域

table 包含 tr , tr 包含 td 或者 th.

表格代码展示

    
    
    
    


    
    

        

            
姓名
            
身高
        
        

            
王思
            
122
        
        

            
李思
            
130
        
        

            
三思
            
140
        
    

表格展示如图10

 图10 表格展示

5.列表标签 

 无序列表

   

       

• .....

       

• ......

       

• ......

   

有序列表

       

1. ......

       

2. .......

       

3. .......

   

 代码使用如下

    
    
    
    


    
无序列表
    

        
司武安
        
因为过
        
趣味赛
    
    
有序列表
    

        
考得起
        
实际温
        
及全身
    

效果如图11

图11 列表图

6.表单标签 

表单域 : 包含表单元素的区域 . 重点是 form 标签

表单控件 : 输入框 , 提交按钮等 . 重点是 input 标签 .

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

action = "test.html" >

  ... [form 的内容 ]

 input 标签

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

type( 必须有 ), 取值种类很多多 , button, checkbox, text, file, image, password, radio 等 .

name: 给 input 起了个名字 . 尤其是对于 单选按钮 , 具有相同的 name 才能多选一 .

value: input 中的默认值 .

checked: 默认被选中 . ( 用于单选按钮和多选按钮 )

maxlength: 设定最大长度 .

1.文本框

type = "text" >

2.密码框

type = "password" >

3.单选框

type = "radio" name = "sex" > 男

type = "radio" name = "sex" checked = "checked" > 女

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

4.复选框

type = "checkbox" > 看书 type = "checkbox" > 学习   type = "checkbox" >

完游戏

4.按钮

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

使用如下

    
    
    
    


    

        
        

        

        
        
        男 
        
        女 
        
 
        
         学习
         看书
         玩游戏
         跑步
        

        
        
        
    

 效果展示如图12

 图12 框展示

 5.选择文件

6.下拉菜单

 

           

请选择年份

 

 代码的使用如下

    
    
    
    


    

       
       
       

       
       
           请选择年份
           1998
           1999
           2000
           2001
           2002
       
    

 效果展示如图13

 

 图13 选择、下拉展示图

7.多行输入框

</p> <p></p> <p>