专栏首页黑泽君的专栏day01_html学习笔记

day01_html学习笔记

day01_html学习笔记

=============================================================================
=============================================================================
涉及到的知识点有:
    一、html简介
        1、html是什么?
        2、html能做什么(html的作用)?
        3、html书写规范    
    二、html基本标签
        1、文件标签(又叫结构标签)
        2、排版标签
        3、块标签
        4、文字标签
        5、清单标签(也称为列表标签)
        6、图形标签
        7、链接标签
        8、表格标签
    三、html表单标签(重点)
        1、form标签
        2、input标签
        3、select标签
        4、文本域标签
    四、html框架标签及其他
        1、框架标签
        2、其他标签
        3、特殊字符
=============================================================================
=============================================================================
day01_html学习笔记
-----------------------------------------------------------------------------
一、html简介
    1、html是什么?
        html是用来描述网页的一种语言。
            (1) HTML 指的是超文本标记语言(Hyper Text Markup Language)。
            (2) HTML 不是一种编程语言,而是一种标记语言(markup language),标记语言是一套标记标签(markup tag)(包括:HTML XML XHTML)。
            (3) HTML 使用标记标签来描述网页。
        超文本 标记 语言
            超文本:
                (1) 普通文本不能实现的,超文本可以实现,能实现普通文本不能实现的功能,表达能力优于普通文本如声音、图形等。
                (2) 包括超链接的文本。
            标记:
                就是标签,不同的标签能实现不同的功能。
            语言:
                人与计算机交互的工具。
--------------------------------------                
    2、html能做什么(html的作用)?
        html通过标签的形式将信息展示给用户。
        HTML文档的后缀名? 答:.html/.htm  以上两种后缀名没有区别。
--------------------------------------
    3、html书写规范    
        (1) html基本结构
            <html>
                <head>
                    包括资讯信息:即整个页面的属性、指导浏览器解析的标签、引入外部文件的标签(CSS和js)。
                </head>
                <body>
                    我们需要展示的信息(正文)。
                </body>
            </html>
--------------------------------------
        (2) html标签是以尖括号包裹关键字成对出现的,有开始标签和结束标签(又叫围堵标签),支持正确的嵌套。
        (3) 大部分标签有属性 格式:属性="属性值"(多个属性之间用空格隔开)
        (4) 空标签:功能比较单一 。例如:<br></br> = <br/>(又叫自闭合标签)
        (5) html不区分大小写,建议使用小写。
            注意:所有标记语言,标签中的英文单词没有以数字开头的。比如<1234>。
            注意:HTML中不支持:空格、回车、制表符,他们都会被解析成一个空白字符
            注意:空的html标签解释 
                没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
                <br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
                在开始标签中添加斜杠,比如 <br/>,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
                即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
        
            需求:写一段文字,将其中的部分文字变成红色,字号变大。
                <html>
                    <head></head>
                    <body>
                        我请大家吃狗不理<font color="red" size="5">包子</font>,
                        <br/>
                        大家很高兴!!!
                    </body>
                </html>
-----------------------------------------------------------------------------
二、html基本标签
    1、文件标签(又叫结构标签)
        <html></html> 根标签
        <head>
            <title></title> 页面的标题
        </head>
        <body></body> 内容
            属性:
                text 整个文本的颜色
                bgcolor 背景色
                background 背景图片
                
            示例:
                <html>
                    <head>
                        <!--<title>我的第一个html页面</title>-->
                    </head>
                    <body text="green" bgcolor="black" background="images/bg.jpg">
                        我请大家吃狗不理<font color="red" size="5">包子</font>,
                        <br/>
                        大家很高兴!!!
                    </body>
                </html>
                    
            颜色的三种表示方式:
                (1) 直接填写颜色的英文名称:red、green、black...
                (2) rgb三原色:reg(0,0,0)  0-255
                (3) #FF0000(红色)、#FFFF00(黄色)、#0000FF(蓝色)、
                    #00FF00(绿色)、#FFFFFF(白色)、#00FFFF(青色)、#000000(黑色)
            注意:(2)和(3)没有关系,(3)最常用。
--------------------------------------
    2、排版标签
        (1) 注释标签
        (2) 换行标签 <br/>
        (3) 段落标签 <p>文本文字</p> 特点:段与段之间有空行
            属性:align 对齐方式 :left、center、right
            属性(align)已过时。 在HTML5文档中不鼓励使用它。
            在 HTML 4.01 中,不赞成使用 p 元素的 align 属性;
            在 XHTML 1.0 Strict DTD 中,不支持 p 元素的 align 属性。
            请使用 CSS 代替。CSS 语法:<p style="text-align:right">
        (4) 水平线标签 <hr/>
            属性:
          width 长度
                size 粗度
                color 颜色
                align 对齐方式
            在 HTML 4.01 中,hr 元素的所有呈现属性均不被赞成使用。
            在 XHTML 1.0 Strict DTD 中,hr 元素的所有呈现属性均不被支持。请使用样式取代它。
            
            尺寸的写法:
                像素 写法:10px(px可写可不写)
                百分 比写法:占据副标签的百分比 50%
                区别:尺寸百分比的写法会随着副标签的大小进行变化。
                
            &nbsp;  表示缩进,nbsp是英文Non-Breaking SPace的缩写,可以直接翻译成“不被折断的空格”。
     
            示例:
                春夜喜雨<br/>
                杜甫<br/>
                <hr width="50%" size="50px" color="red" align="left"/>
                <!-- <p align="center"> -->
                <p style="text-align:center">
                &nbsp;&nbsp;&nbsp;&nbsp;好雨知时节<br/>
                当春乃发生<br/>
                随风潜入夜<br/>
                润物细无声<br/>
                <p>
                野径云俱黑<br/>
                江船火烛明<br/>
                晓看红湿处<br/>
                花重锦官城<br/>
--------------------------------------
    3、块标签
        <div></div>    行级块标签
        <span></span>  行内块标签
        
        作用:
            (1) <div></div> div+css布局
            (2) <span></span> 一般用于进行友好提示
        示例:
            <div style="background-color:red">div1</div>
            <div style="background-color:green">div2</div> 
            <span style="background-color:blue">span1</span>
            <span style="background-color:pink">span2</span>
--------------------------------------
    4、文字标签
        基本文字标签:<font></font>
            属性:
                color 颜色
                size 大小(最大值:7,最小值:1,默认值:3)
                    最大值:7
                    最小值:1
                    默认值:3
                face 字体类型,即字体,直接写文字就可以。
                
        标题标签:<h1></h1> -- <h6></h6>
            随着数字的增大逐渐变小,默认字体是加粗的且内置字号,默认占据一行。
--------------------------------------
    5、清单标签(也称为列表标签)
        无序列表:<ul></ul>
            属性:
                type 有三个值,分别为disc、 square和circle
                <li></li> 列表项
            示例:
                <ul type="square">
                    <li>列表项</li>
                    <li>列表项</li>
                    <li>列表项</li>                
                </ul>
            
        有序列表:<ol></ol>
            属性:
                type 1、A、a、I、i(数字、字母、罗马数字)
                start 数字,代表首项开始位置
                <li></li> 列表项
            示例:
                <ol type="A" start="2">
                    <li>列表项</li>
                    <li>列表项</li>
                    <li>列表项</li>    
                </ol>
            
        列表标签的作用:
            一般用于实现菜单项(可以实现横向或者纵向菜单)
        无序列表标签怎么去掉小圆点?
            答:HTML中不能直接去掉,没有这个属性值,需要在CSS中给li标签添加样式 list-style:none;
--------------------------------------
    6、图形标签
        <img/>(自关闭标签)
            属性:
                src 图形地址
                width 宽度
                height高度
                border 边框
                align 对齐方式,代表图片与相邻的文本的相对位置(有三个属性值:top、middle、bottom)
                alt 图片的文字说明
            示例:
                <img src="images/1.jpg" alt="mm一枚" width="50%" height="73%" border="5" align="bottom"/>
--------------------------------------
    7、链接标签
        <a></a>
            属性:
                href 跳转页面地址
                name 名称,锚点
                target  _self(自己本页面) _blank(新页面,之前的页面还有),默认是_self
            作用:
                (1) 页面跳转
                    注意:要调到外网必须要加协议 http://
                (2) 访问锚点
                    回到锚点(顶部top、中间bottom、底部middle),在访问锚点时的书写格式:#name的值;
                (3) 定位到框架的某个位置。
            示例:
                <a href="http://www.baidu.com" target="_blank">点击我吧 哈哈</a><br>
                <a name="top"></a>
                嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻<br/>
                嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻<br/>
                嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻<br/>
                ...
                ...
                ...
                <a href="#top">top</a>
--------------------------------------
    8、表格标签
        <table></table>
            属性:
                border 表格边框
                width 表格的宽度
                align 表格的对齐方式(<tr align="center"></tr> 表示单元格里面的内容居中对齐)
                bgcolor 背景颜色
        <tr></tr> 代表行
        <td></td> 代表单元格
            属性:
                rowspan 行合并
                colspan 列合并
        <th></th> 相当于<td>,只是内置样式加粗居中
        <caption></caption> 表格的标题,即表头
            
        表格的作用:
            (1) 简单的实现一个表格样式。
            (2) 进行页面布局。(该作用被CSS替代了)
        示例:
            <table border="1" width="50%" align="center" bgcolor="yellow">
                <caption>19成绩表</caption>
                <tr align="center">
                    <th>1--1</th>
                    <th>1--2</th>
                    <th>1--3</th>
                </tr>
                <tr align="center">
                    <td rowspan="2">2--1</td>
                    <td colspan="2">2--2</td>
                </tr>
                <tr align="center">
                    <td>3--2</td>
                    <td>3--3</td>
                </tr>
            </table>     

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • c语言基础学习10_文件操作01

    ============================================================================= ==...

    黑泽君
  • 多态的两道练习题

    黑泽君
  • win10电脑休眠后无法唤醒的解决办法

      电脑的休眠功能,为长时间不用的电脑进行了关闭显示、硬盘停转的深度节能模式,不仅节约能源,还保护设备。

    黑泽君
  • html+css学习笔记001-常用标签

    Mr. 柳上原
  • HTML/CSS 第一章

    问:前端人员的工作跟什么打交道 答:网页 网页的构成:由文字,图片,超链接,多媒体(音频,视频,Flash)等组成!

    用户3461357
  • HTML基础

    HTML基础 ---- HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、javascript三者的关系 HTML是网页内容...

    用户1667431
  • struts2标签库----控制标签详解

         前面几篇文章我们介绍了有关struts2的基本内容,简单理解了整个框架的运作流程。从本篇开始我们逐渐了解和使用struts2为我们提供的标签库技术,使...

    Single
  • 网站页面优化:其它元标签

    ‍元标签,在网站页面优化:标题(TITLE)、网站页面优化:关键词(KEYWORDS)和网站页面优化:描述(DESCRIPTION)这三节课中分别介绍SEO标题...

    林雍岷
  • Bitmap用户分群在贝壳DMP的实践和应用

    DMP数据管理平台是实现用户精细化运营和和全生命周期运营的的基础平台之一。贝壳找房从2018年5月开始建设自己的DMP平台,提供了用户分群、消息推送、人群洞察等...

    smartsi
  • R语言 双坐标轴组合图形可视化实现

    “ 数据可视化过程中,经常遇到两种不同类型图表组合的情况,就是所谓的双坐标轴组合图。最近学习中遇到了此问题,特学习和大家分享,部分内容有个人改进哟”

    拴小林

扫码关注云+社区

领取腾讯云代金券