HTML学习笔记

一.HTML的基本结构

1常用标签

        html(超文本标记语言)是网页制作的基础,其文档通常包括以下基本结构:

 <!DOCTYPE html>------ 声明了一个html的文档
 <html>
 <head>
     <title>网页标题</title>
 </head>
 <body>
     <!-- 页面内容 -->
 </body>
 </html>

01 编码格式:

        1、GB2312 ------ 简体中文字符集

        2、 UTF-8 ------ 通用字符集

        3、 BIG5 ------ 繁体中文字符集

        4、GBK ------ GB2312延申,增加了一些更多的汉字和特殊符号

02 strong、b标签:

        作用:加粗字体

        

03 br和hr标签:

        br标签是用来换行------- 单标签

        hr:水平分割线 ,单标签,可以设置width属性表示的水平分割线的长度,size属性设置的粗                 细

04 p标签:

        段落标签 ,两个相邻的p标签中间会空一行

        align属性 ------ 位置 left center right,默认值是left

        font标签 ------ 这是字体

        color属性:颜色  ;颜色的表示法:英文单词 red black pink

        #rrggbb 三原色 red green blue

05 sub、sup、pre、span标签:

        sub ----- 下标标签

        sup ---- 上标标签

        pre ------ 用来原样输出内容

        span ---- 修饰文本的标签 ----- 标准的行内标签

06 hn和div标签:

        hn指的是h1,h2,h3,h4,h5,h6 ----- 标题标签 n取值只能是1-6 字体越来越小 有加粗的效果

        div标签 ---- 标准的块级标签 ------ 盒子布局

        块级标签:独占一行,自动换行 div hn p hr

        行内标签:不能自动换行,除非这一行的文本内容铺满了整个页面才会换行 span

07 特殊字符:

 

 2 表单标签

 01   form 标签 一般会和input标签连用

        action: 跳转的路径

        绝对路径:从盘符开始到文件名称的全部路径

        相对路径:当前源文件和目标文件的相对路径

        method: 表单提交的方式 get post 默认是get

        name : 表单的名称

        get:会把用户请求的内容暴露在地址栏上 ; post: 相较于get会安全一点

        

  02 表单元素:

        表单元素(文本框、密码框、下拉列表、单选、多选)

        一般由input、textarea、select标签构成,需要放到form里面

        001 input标签:

                        语法格式

                        

                         type的取值:

                                text ------ 文本框;password ---- 密码框;radio ---- 单选按钮;                                                        checkbox ---多选按钮 ;submit ---- 提交按钮;reset ----- 重置按钮;

                                button ----- 普通的按钮;image ---- 图像按钮;file ---- 文件域;

                                hidden ----- 隐藏域;email ------ 邮箱;color ----- 颜色域;

                                date ----- 日期;time ------ 时间;datetime-local ------ 日期+时间;

                                 range ---- 进度条

 

                         input标签常用的属性:

                             checked ---- 默认选择;readonly ------ 只读 字段只可以读不能修改;

                             disabled ----- 禁用 不可以点击;autofocus ------ 默认光标的位置;

                             required---- 不能为空白提交

        

       002 textarea标签:

                用来实现文本域 ; cols ------- 多少列,用于显示文本的宽度 ;

                rows ------- 多少行,用来显示文本的高度

                                 

       003 select标签:

                下拉列表框 ------ 一般和option标签进行连用;selected属性 ---- 默认被选中的选项;

                multiple属性 ------- 以列表的形式显示

                

3 常见的属性

        a标签 ----- 超链接

                 

        vlink ----- 访问过超链接文本的颜色;Alink ------ 激活超链接文本的颜色;

        link ------ 超链接文本的颜色;text ---- 文本的颜色;bgcolor ----- 背景颜色;

        background ------ 背景图片

        颜色表示法: 

            英文单词;#rrggbb;rgba() a表示透明度

                

      

4 a标签 

        a标签 ----- 超文本链接标签 ----- 用来进行页面跳转 herf = "url" 跳转页面的路径

        target 属性

                

                          

5 img标签

        常见的图片的格式:GIF JPG PNG BMP等

 01 常见的属性:

        src 属性 ---- 指的是图片的路径(绝对路径和相对路径);alt属性 ------ 代替图片的文本内容          (因为路径的问他或者因为浏览器的问题显示不出来这个张图片的 时候,alt属性值就是去描            述这张图片的一个内容);width ------ 宽度;height ---- 高度;border ------ 边框,默认值0           ;

        align ----- 位置 (图片和文字的位置) top (上对齐) middle(居中对齐) bottom(下对齐 默认值)          left(左对齐) right(右对齐) ;title ------ 图片的标题 ,用来显示描述图片的文字                        

                 

        

02 位图:

        usemap属性  ;  map标签的name属性,一般会和area标签进行连用 

        属性:shape ------- 鼠标点击的形状;coords ----- 鼠标点击形状的大小;href ------ 表示跳转的                      路径

                

6 多媒体标签

        audio 标签 ---- 音频; video 标签 ---- 视频; controls属性 ---- 表示播放器的组件;

        autoplay属性 ----- 自动播放(浏览器不支持这个属性值); loop 属性 ---- 循环播放

7 表格布局

        table标签

        包含thead tbodt tr td tfood

        

          

           

 01 表格的边框

        border ----- 表格的边框

         

 02 表格的宽度和高度 

        width ----- 宽度;height ---- 高度

        

          

 03 表格的对齐方式 

        align ----- 对齐方式 left right center

        

 04 表格的背景

        bgcolor ----- 背景颜色;background ---- 背景图片

         

 05 表格的间距和边距

        cellpadding ------ 表格边距(表示的是单元格内元素距离单元格边缘的距离)

        cellspacing----- 表格的间距(单元格和单元格之间的距离)

         

           

 06 表格的嵌套

        表格里面可以嵌套表格 

        

 07 表格的合并

        rowspan ------- 表示在单元格上垂直方向上去跨行(合并行)

         

        colspan ------ 表示单元格上水平方向跨列(合并列) 

                

8 列表标签 

        主要有三种:有序列表、无序列表、数据列表

 01 有序列表 ---- ol

        type属性 ---- 设置序号的种类,默认的是数字;start属性 ----- 控制序号开始的位置;

        reversed属性 ----- 降序(反序)

        

              

 02 无序列表---- dl

        type属性 ------ 无序列表的样式 disc(默认取值 实心圆) circle(空心圆) square(实心方框)

         

 03 数据列表 ----- dl

         

9 多窗口框架

        一个页面可以显示多个窗口 ----- frameset (不能和body标签连用)

        cols ------ 定义页面列方向的尺寸或则数目;rows ---- 行

         

         

                

         

         

  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值