07.29自我总结

HTML(页面架构)

一.什么是HTML

HTML是一种超文本标记语言

• 超文本:文本,图片,音频,视频,超链接等
• 标记:符号,标签 标记是没有逻辑的

组成:

• 指令
• 转义字符
• 标签

目的:完成页面的搭建

HTML页面大致的组成部分

• :必须出现在页面的最上方，规定该文档采用的html版本类型
• :页面标签：包含所有页面内容，只有head与body两个子标签
• :头标签：样式、脚本、后勤操作：页面编码、页面标签标题图标,主放功能
• :体标签：页面显示内容存放区域、样式、脚本,主放内容

简单的一个htm5搭建:

二.指令

• 注释:,还有一种不常用的注释写法

• 文档类型:

三.转义字符

语法:&内容;

常用的转义字符

<: <
>: >
空格： 
版权：©

四.标签

1.标题标签

? h1~h6:里面内容相对于普通的内容会加粗,且会自动换行

2.段落标签

? p:自带换行，有段落间距

3.文本类型标签

? 共同点都不带换行

? 常用的文本类型标签

• b与strong:内容加粗
• i与em:内容斜体
• sup:上角标
• sub:下角标
• span:没有什么意义,但是会用来嵌套其他文本表示共同使用

4.超链接标签

a标签

例如如下一句

页面中显示的文本内容

• href:里面选择超链接地址,注意如果没加http://,https://,file://,前缀默认会在原来地址后面添加拼接成一个新的链接

• targe:

  • _self:在原本的窗口打开
  • _blank:创建一个新窗口打开
  • _top:覆盖上一条记录
  • _parent:覆盖所有的记录

  且超链接点击后会在浏览器上生成记录,显示文本颜色会变紫色

5.图片标签

• title:鼠标停留会显示,也可以用于其他标签当属性
• alt:src中的 url响应失败显示的内容
• src:图片的url

6.列表标签

? ul>li:无序标签

? ol>li:有序标签

特殊的快捷键:ul>li{第$列}*5,其中$表示显示序列的位数
 显示结果:

    
第1列
    
第2列
    
第3列
    
第4列
    
第5列

ul>li{第$$列}*5 显示结果

    
第01列
    
第02列
    
第03列
    
第04列
    
第05列

7.表格标签

table>tr>th|td

• tr:行
• th:标题单元格
• td:普通单元格

属性

• border:边框像素
• cellspacing:单元格的间距,最小为0
• cellpadding:单元格的内边距
• rules:all处理成一条直线,但是不能与cellspacing一起用会冲突
• colspan:th与td的属性表示占几列默认为1
• rowspan:th与td的属性表示占几行默认为1

案例

    
五.表单
from>input|label|button|textarea|select
1.form表单属性

        

            
标题1
            
标题2
            
标题3
        
        

            
1
            
2
        
        

            
5
            
6
        
        

            
7
            
8
            
9
        







属性
值
含义




action
url
指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身。该属性值可以为绝对地址、相对地址、文档片段，甚至是脚本代码


method
get或post
将表单数据提交到http服务器的方法，可能值有两个：get和post


enctype
application/x-www-form-urlencoded
指定表单数据的编码类型，此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencoded对所有字符进行编码。如果表单包含用于文件上传的控件（input type=“file”），那么这个属性值必须设为multipart/form-data ，不对字符进行编码。



2.input标签
input属性大概介绍:

type:按钮的属性
id:标识
name:与后端交互的key
values:给后端的值,如果没有name则没法给到后端

案例介绍



    
    


    
    

        

            
            
            
            
            
            
            账号：
            
        
        

            密码：
            
        
        

            
        
        

            
        
        

            男
            女
        
        

            男
            女
            哇塞
        
        

            普通按钮
            重置按钮
            提交按钮
        
        

            
        
        

            
            
            
        
    



3.input标签type属性



type属性
空间名称
对应代码




text
单行文本输入框



password
密码输入框



checkbox
复选框



radio
单选框



submit
提交按钮



reset
重置按钮



button
普通按钮



hidden
隐藏按钮



file
文本选择框




4.select标签(下拉列表)

    
  	    北京
	    天津
	    河北
	    山东
	    内蒙
    


5.select属性
multiple : 布尔属性，设置后允许多选，否则只能选择一个

disabled : 禁用该下拉列表

selected : 首次显示时,为选中状态

value : 定义发往服务器的选项值
6.textarea标签

        默认内容
    


7.textarea属性



属性
属性值
说明




name
name
控件名称


rows
number
设置多行文本框的显示行数（高度）


cols
number
设置多行文本框的显示列数（宽度）


disabled
disabled
布尔属性，设置当前文本框为禁用状态



8.label标签

    用户名
    


9.label属性
label元素不会向用户呈现任何特殊效果
 标签的 for 属性应当与相关元素的 id 属性相同
结合CSS可以控制表单文本或控件对齐，美化表单

10.button标签
只是个简单的按钮
六.单标签

br:换行
hr:分割线
表单使用的标签
img:图片标签

七.div标签
div标签自带换行,主要是用来网页大体的分区框架的划分
八.注意

html中不区分大小写
如果你写的显示内容没有写在body内,浏览器解析后还是会默认把内容丢到body内