HTML基础

title

HTML文档头部

描述了一些文档基本信息，content供搜索引擎使用

供移动端浏览器使用
关于meta标签更多内容可参考Haorooms

标签还可以引入CSS样式

HTML文档主体

书写规范：标签和属性名小写，属性值双引号引起来，嵌套利用统一缩进

对所有标签有用的属性:

id:规定了元素在页面中唯一地标识
class:在功能中拥有同一功能或样式的元素可以用class标识
style: 规定元素的样式（并不推荐在其中写样式）
title: 鼠标悬浮显示提示

文档章节

：表示文档章节的头部，里面可以包含标题、logo等

：主要用于页面或独立文档底部

：用于存放导航性质的内容

：表示和主要内容不想关的内容，如广告等

HTML 标题（Heading）是通过< h1> - < h6>标签来定义的。
可以

超链接通过标签 < a> 来定义。
- 创建指向另一个文档的连接
这是一个链接
在 href 属性中指定链接的地址，target=_blank表示在新页面中打开链接，target=_self表示在当前窗口中显示（默认值）
- 创建一个文档内部的锚点

< p id="paragraph1">123```
回到顶部功能也可以利用超链接实现
- 链接到email地址
```< a href="mailto:[email protected]">联系我们```
- 在手机上实现点击电话号码跳出拨号界面
< a href="tel:xxx">xxx

**文字强调**:em, strong
< em>39< /em>呈现样式为39
< strong>39< /strong>呈现样式为39

指定文字特定样式：39

**文字换行**：br

**引用**：cite，q

鲁迅故乡中写到xxxxx

![](http://upload-images.jianshu.io/upload_images/2477456-820867dce841b2a6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**代码**：code

**格式化**：粗体< b>，斜体< i>

#####组合内容
![](http://upload-images.jianshu.io/upload_images/2477456-b95810cba895c3be.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 分区：div
- 段落：p
- 列表：ul, ol, dl(自定义列表)，列表间可以相互嵌套

自定义列表
![](http://upload-images.jianshu.io/upload_images/2477456-2e0cd741d6e2a124.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
< dt>定义了列表的项
< dd>列表项的内容
一个dt中可以有多个dd
- 保留文本原格式：pre
- 大段引用：blockquote

#####嵌入资源
- img:嵌入图片

alt给出图片的描述
- 嵌入页面：iframe

嵌入页面上的操作并不影响当前页面
- 嵌入插件：object，embed

src="http://pdfReader.swf" width="640 height="480">

- 插入视频：video
![](http://upload-images.jianshu.io/upload_images/2477456-cacb1b33e273d7e0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
可以在

表明格子线宽为1
表格标题

表的一个字段，可以在首行或首列

  表的一行

  一个字段的值

 表示占两列，rowspan表示占两行

table1
val1	val2
1	2
12345

![](http://upload-images.jianshu.io/upload_images/2477456-aaa45c0413adc41f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![](http://upload-images.jianshu.io/upload_images/2477456-97aac23ab019c980.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#####表单标签
![](http://upload-images.jianshu.io/upload_images/2477456-5346dae0788d341c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

 
     action为提交的表单的后台地址，method为表单提交方式
           
        照片选择      
        选择照片
              
    
    
        综合设置
        选择尺寸：
        
              
            
            
            
            
            
            
            5寸
            
            6寸
        
        选择相纸：
        
                  
            
            富士
            
            柯达
        
        
            配送方式：
              
            
            
        
        
            商品描述：
                
            
        
        
            意见反馈：
            </code></pre> 
 <p>
 
 
 
 
 

 

 
 
 
 

 
 
 **HTML5中新的input type类型**
- email
- url
- number
- tel
- search
- range
- color
- date picker

#####HTML  标签的 type 属性#####

值 | 描述
--- | ---
button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox | 定义复选框。
file | 定义输入字段和 "浏览"按钮，供文件上传。
hidden | 定义隐藏的输入字段。
image | 定义图像形式的提交按钮。
password | 定义密码字段。该字段中的字符被掩码。
radio    | 定义单选按钮。
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。
text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

#####HTML实体字符
假设想在页面上显示如下内容：这是个标签
但是并不会显示，这时候就需要用到实体字符，类似于转移字符
![](http://upload-images.jianshu.io/upload_images/2477456-4d20b78d639c77bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

HTML基础

HTML文档头部

HTML文档主体

文档章节

你可能感兴趣的:(HTML基础)