HTML基础知识总结

1.基本标签的使用形式


        字体变粗b
        
        字体加粗strong
        文字变斜体i
        文字变斜体em
        文字加下划线
        删除线
        
换行
        

段落


        
用原来
        样式
        输出内容

        标准行内标签,一般用来修饰文本
        
标准块标签,一般用来布局页面

        

哈哈


        

哈哈


        

哈哈


        

哈哈


        
哈哈

        
哈哈

这些基本标签的代码表示为:



	
		
		
	
	
		
		字体变粗b
		
		字体加粗strong
		文字变斜体i
		文字变斜体em
		文字加下划线
		删除线
		
换行

段落

用原来
		样式
		输出内容
标准行内标签,一般用来修饰文本
标准块标签,一般用来布局页面

哈哈

哈哈

哈哈

哈哈

哈哈
哈哈

其运行结果为:

HTML基础知识总结_第1张图片

2.行内标签与块标签

2.1.行内标签

 行内标签:指的是如a、span、b、strong、em、i、u、del

这些标签的内容如果可以在一行中展示,则不会换行,直到占满一行后才会换行输出

2.2.块标签

块标签:指的是div、p、hr、br、hn

这些标签,即使内容不够一行,也会换行输出

 3.HTML5 新增

其代码表示为:



	
		
		
	
	
		
定义页面的顶部(页眉)内容
中间部分
尾部部分
主要是用来表示文章内容的
用来在文档中呈现联系信息,包括文档作者或文档维护者的名字,他们的网站链接、电子邮件、真实地址、电话号码等
标注或者高亮一些我们需要的关键字词 表示当前完成进度情况 表示作品或文章中的标题 html5中,small元素被重新定义了,small通常标签与正文无关的文字,内嵌在页面上,如标注的版权信息,网站备案等 画布标签,用来在页面上画图案

其运行结果为:

HTML基础知识总结_第2张图片

4.特殊字符 

特殊字符 转义码
空格  
< <
> >
¥ ¥
 " "
© ©
® ®
± ±

÷ ÷

 5.常见的图片格式

<--

        img 标签用来引入图片到页面中

        src是一个必须的属性,该属性表示图片的地址

-->

5.1.img标签的常见属性

属性名称 属性值 功能
width 数字(像素)px 图片的宽
height 数字(像素)px 图片的高
border 数字(像素)px 图片的边框
align left(左)、center(中)、right(右) 图片的水平对齐方式
vspace 数字(像素)px 图片与文字的水平距
hspace 数组(像素)px 图片与文字的垂直距离
alt 字符串 图片的替换文本

 alt:当浏览器不能显示所指定的图片,这时可以设置一段文字来说明此图。

6.视频音频标签

controls 表示播放器的组件

autoplay 表示自动播放

 注:video、audio标签均需要书写src属性,表示视频或者音频的位置。

7.表格标签

1,1 1,2 1,3
2,1 2,2 2,3
3,1 3,2 3,3

属性名 属性值 功能
width 数字(像素)px 单元格宽度
height 数字(像素)px 单光格高度
align left(左)、center(中)、right(右) 单元格水平对齐方式
valign top(上)、middle(中)、right(下) 单元格竖直对齐方式
bgcolor 颜色 单元格的背景颜色
background 图片 单元格的背景图片
rowspan 数字 垂直方向跨行
colsoan 数字 水平方向跨列

7.1.cellpadding与cellspacing的区别

cellpadding 表示表格的边距

cellspacing 表示表格的间隔

HTML基础知识总结_第3张图片

 7.2单元格跨行rowspan

HTML基础知识总结_第4张图片

 其代码表示为:



	
		
		
	
	
		
haha haha2 haha3 haha4
haha2 haha3 haha4
haha haha2 haha3 haha4

 其运行结果为:

HTML基础知识总结_第5张图片

7.3单元格跨列colspan

HTML基础知识总结_第6张图片

其代码表示为:



	
		
		
	
	
		
haha haha2
haha1 haha2 haha3 haha4
haha haha2 haha3 haha4

 其运行结果为:

HTML基础知识总结_第7张图片

8.超链接与锚链接

 html文件最重要的应用之一就是超链接,通过网上提供的超链接功能,用户可以链接到网上的其他网页。如果没有超链接,就只能在浏览器地址栏中输入各个网页的地址,这是一件非常麻烦的事情。

8.1超链接

超链接 

  1. href :用来明确链接的目标文件
  2. target属性:用来明确目标文件的打开方式
  3. target = "-blank":表示在新窗口打开目标文件,省略在原窗口打开目标文件
  4. target属性默认值为self:表示当前选项卡打开页面

其代码表示为:



	
		
		
	
	
		超链接
	

我们可以看到链接到之前的代码“index.html”(也就是1.基本标签的使用形式

8.2锚链接

        在制作网页时可能会遇到网页内容过长的情况,这样用户浏览起来就不太方便。要解决这个问题可以在网页上部创建一个导航,利用导航直接链接到下面定义好的锚点

和淘宝这些网络的楼层效果类似,就是让页面定位到需要的地方,注意在链接的href属性上加"#id",之后在需要停止的位置的标签上设置对应的id即可。

当点击ul标签后的超链接,系统就会自动跳转至相应的页面。

9.列表标签(有序、无序、数据列表)

9.1右序列表-ol

 

           

  1.        

种类 表现形式
type="1" 用数字表示条目
type="a 用字母表示条目
type="I" 用罗马数字表示条目

其代码表示为:



	
		
		
	
	
		
  1. haha1
  2. haha2
  3. haha3

type="a" 表示他的类型是a

start = "a" 表示他是从a开始的

reverser 表示他的顺序为原本顺序的逆序

其运行结果为:

HTML基础知识总结_第8张图片

9.2无序列表-ul

       

  •        

  • type属性设置序号的种类,无序列表序号种类有3种
    种类 表现形式
    type="circle" 用圆形表示条目
    type="disc" 用实心圆表示条目
    type="square" 用方形表示条目

    9.3数据列表-dl

    数据列表主要用来描述存在标题的列表组

           

    这个是标题

           

    这个是内容

            

    这个是内容

    其代码表示为:

    
    
    	
    		
    		
    	
    	
    		
    这个是标题
    这个是内容
    这个是内容

    其运行结果为:

    HTML基础知识总结_第9张图片

     10.表单标签form

    表单是用form标签来定义的

    • method:方法有get(可看见的)、post(加密的)这两种提交方式
    属性名称 属性值 属性作用
    action 要处理文件的路径 表单提交后,处理表单的文件
    method 请求方式 method属性用来明确表单的提交方式
    name 字符串 表单的名称

    10.1.input标签

    input表示表单元素,type是非常重要的属性,type不同的值表示不同的元素类型
    类型 作用
    type="text" 单行文本框
    type="password" 密码框
    type="radio" 单选按钮
    type="checkbox" 多选按钮
    type="submit" 提交按钮
    type = "reset" 复位按钮
    type = "button" 按钮
    type = "image" 图像按钮
    type="hidden" 隐藏域
    type = "file" 文件域

    属性名称 属性值 功能
    name 字符串 元素的名称
    value 字符串 元素的值
    id 字符串 客户端唯一标识
    size 数字 以字符个数设定的元素宽度
    maxlength 数字 元素接受字符数的上限
    checked 元素是否被选中

    10.2.select标签

    select元素主要是表单的下拉选择框

    属性名称 属性值 属性作用
    option 子项 下拉框中的选项
    value 字符串 选项的值
    name 字符串 下拉框的名称
    selected 默认被选中的选项
    multiple "multiple" 以列表形式显示

    注意:

    当select标签设置multiple属性时,select以列表形式显示,当select标签不设置multiple属性时,以下拉框形式显示。列表框在选择时按住键盘的ctrl或shift建可以实现多选,而下拉框只能单选。

    10.3.textarea标签

    textarea也是表单标签的三大核心元素之一。

            内容

    属性名称 属性值 属性作用
    cols 数字 以字符个数设定的多行文本框的宽度
    rows 数字 以行数设定的多行文本框的高度
    name 字符串 多行文本框的名称

    11.综合案例

    
    
    	
    		
    		表单标签
    	
    	
    		

    用户注册


    用户密码:
    用户性别:
    用户爱好: 篮球 LOL 王者 唱歌
    用户头像:
    用户博客地址:



    用户邮箱:

    用户地址:

    用户意见:

    你可能感兴趣的:(HTML,html,html5,css)