HTML基础语法

一、HTML简介

---

万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

二、模板介绍

---

1、模板

我们用pycharm新建一个文件内容如下：

说明：

注释：

    
    
    
    


    
    百度



我们可以通过浏览器打开此文件，点击百度图标实现跳转

2、Meta（metadata information）

提供有关页面的元信息，页面编码、刷新跳转、描述、更新频度等

（1）页面编码

< meta http-equiv="content-type" content="text/html,charset=utf-8" >

（2）刷新和跳转

<1> 刷新：

    
    
    
    
    
    


    
    百度

<2> 跳转：

    
    
    
    
    
    


    
    百度

（3）关键字

别人通过网站的关键字来搜索到此网站

< meta  name="keywords" content="哈哈，呵呵" >

（4）描述

    
    
    
    
    
    
    
    


    
    百度

（5）IE兼容

三、body介绍

---

1、特殊符号

 ：空格，<：小于 >：大于
虽然我们可以可以直接写大于号和小于号，但是这样防止于html自定义代码产生冲突！！！

    
    


    dream   <a>ya

符号	命名实体	符号	命名实体
Α	Α	Β	Β
Γ	Γ	Δ	Δ
Ε	Ε	Ζ	Ζ
Η	Η	Θ	Θ
Ι	Ι	Κ	Κ
Λ	Λ	Μ	Μ
Ν	Ν	Ξ	Ξ
Ο	Ο	Π	Π
Ρ	Ρ	Σ	Σ
Τ	Τ	Υ	Υ
Φ	Φ	Χ	Χ
Ψ	Ψ	Ω	Ω
α	α	β	β
γ	γ	δ	δ
ε	ε	ζ	ζ
η	η	θ	θ
ι	ι	κ	κ
λ	λ	μ	μ
ν	ν	ξ	ξ
ο	ο	π	π
ρ	ρ	ς	ς
σ	σ	τ	τ
υ	υ	φ	φ
χ	χ	ψ	ψ
ω	ω	ϑ	ϑ
ϒ	ϒ	ϖ	ϖ
•	•	…	…
′	′	″	″
‾	‾	⁄	⁄
℘	℘	ℑ	ℑ
ℜ	ℜ	™	™
ℵ	ℵ	←	←
↑	↑	→	→
↓	↓	↔	↔
↵	↵	⇐	⇐
⇑	⇑	⇒	⇒
⇓	⇓	⇔	⇔
∀	∀	∂	∂
∃	∃	∅	∅
∇	∇	∈	∈
∉	∉	∋	∋
∏	∏	∑	∑
−	−	∗	∗
√	√	∝	∝
∞	∞	∠	∠
∧	∧	∨	∨
∩	∩	∪	∪
∫	∫	∴	∴
∼	∼	≅	≅
≈	≈	≠	≠
≡	≡	≤	≤
≥	≥	⊂	⊂
⊃	⊃	⊄	⊄
⊆	⊆	⊇	⊇
⊕	⊕	⊗	⊗
⊥	⊥	⋅	⋅
⌈	⌈	⌉	⌉
⌊	⌊	⌋	⌋
◊	◊	♠	♠
♣	♣	♥	♥
♦	♦
¡	¡	¢	¢
£	£	¤	¤
¥	¥	¦	¦
§	§	¨	¨
©	©	ª	ª
«	«	¬	¬
	­	®	®
¯	¯	°	°
±	±	²	²
³	³	´	´
µ	µ

2、p、br、h和span标签

br标签：换行

所有标签分为：
    块级标签：div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
    行内标签（内联标签）：span（白板，不带属性）
标签之间可以嵌套
标签存在意义：有利于css操作，js操作
我们可以通过F12进入查看样式（代码）

    
    


    
123
45678901234567890
    
dream
    
dream
    
    
dreamya
    
dreamya
    
dreamya
    
dreamya
    
dreamya
    
dreamya
    
    yayaya
    yayaya

    
123
    
123

3、input

input type='text'           ###name属性，value="dream"
input type='password'       ###name属性，value="dream"，可以隐藏显示
input type='submit'         ###value='提交' 按钮
input type='button'         ###value='登陆' 按钮

form：

发送消息给后台我们可以通过form进行发送，method有GET（通过网址一起发送过去）和POST（通过内容发送过去）,发送格式为字典！！！

input type='radio'        ###单选框 value，checked="checked"：默认选中，name属性（只能选择一个，互斥）
input type='checkbox'     ###单选框 value，checked="checked"：默认选中，name属性（可同时选中多个）
input type="file"         ##依赖from表单的一个属性，并加入enctype="multipart/form-data"
input type="reset"        ###重置

    
    



    

        

        
性别：
        男：
        
        
          女：
        

        
爱好：
        basketball:
        
        football:
        
        volleyball:
        
        
        
上传文件：
        
        
    
    
    
    

4、批量写入（textarea）

默认值        ###name属性
eg.
content

5、select标签

select              ###name，内部option value，提交到后台，size，multiple

    四川
    浙江
    福建

通过size显示多行，multiple（选择多个）：

    四川
    浙江
    福建

分组显示：

    
        成都
        广安
    
    
        杭州
        温州
    

6、a标签

跳转，锚：href="#某个标签的ID"，标签的ID不可以重复

    电影
    电视剧
    动漫
    
我不是药神
    
我是特种兵
    
海贼王

7、img标签

### scr：图片名称，要和你的脚本路径相同，或者写全路径，style：指定宽度和长度，alt：当图片找不到时所给的提示

8、列表

ul
     li
ol
     li
dl
     dt
     dd

    
test
    
test



    
test
    
test



    
dddd
    
dtdt
    
dtdt
    
dddd
    
dtdt
    
dtdt

9、表格

（1）简单写法

table
	thread
		tr
			th
	tbody
		tr
			td

    

        
姓名
        
性别
        
年龄
    
    
    

        
dream
        
男
        
23
    

（2）标准写法：

    
    

        

            
姓名
            
性别
            
年龄
        
    
    
    
    

        

            
dream
            
男
            
23
        
    

（3）合并单元格：

colspan：横向合并单元格；rowspan：纵向合并单元格

    
    

        

            
表头1
            
表头2
            
表头3
        
    

    
    

        

            
1
            
2
            
        
        

            
4
            
5
            
6
        
        

            
            
8
            
9
        
    

10、lable标签

点击姓名：也能进行编辑！！！

 姓名：
 

11、fieldset

    
登陆
    姓名：
    
    

    密码：