HTML基础语法

最新推荐文章于 2019-08-20 23:29:52 发布

俊哥哥来也

最新推荐文章于 2019-08-20 23:29:52 发布

阅读量1.1k

点赞数 9

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/jj2320711457/article/details/82533767

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

一.HTML基础语法

1. 概念：是最基础的网页开发语言

    含义: 
        Hyper Text Markup Language 超文本标记语言

    超文本:
        超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.

    标记语言:
        由标签构成的语言。<标签名称> 如 html，xml
        标记语言不是编程语言

2. 快速入门

    语法：
    1. html文档后缀名 .html 或者 .htm
    2. 标签分为
        1. 围堵标签：有开始标签和结束标签。如 <html> </html>
        2. 自闭和标签：开始标签和结束标签在一起。如 <br/>

    3. 标签可以嵌套：
        需要正确嵌套，不能你中有我，我中有你
        错误：<a><b></a></b>
        正确：<a><b></b></a>

    4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
    5. html的标签不区分大小写，但是建议使用小写。

二.HTML的常用标签

1、HTML的注释写法

    <!-- 这是注释  -->

2、标题标签(数字越小,字越大)

    <h1></h1>  一级标题
    <h2></h2>  二级标题
    <h3></h3>  三级标题
    <h4></h4>  四级标题
    <h5></h5>  五级标题
    <h6></h6>  六级标题

3、字体标签 font

    A.标准格式
    <font> 字体的设置 </font>


    B.常见属性
    a.字体大小的设置 size="1"  范围1-7 数字越大,字体越大
    b.字体颜色的设置 color="red" 红色  #00FF00 绿色
    c.字体标签的设置 face="楷体" 一定要是自己系统当中有这个字体


    C.加粗,斜体,下划线
    <b>字体会加粗</b>
    <i>字体会倾斜</i>
    <u>字体下划线</u>

4、格式化标签

    A.换行
    <br> 也可以 <br/> 只有一半(无需包裹.只写一半)


    B.段落
    <p> 长段文字 </p> 


    C.水平线
    <hr>
    a.宽度 width 直接写数字表示像素,加上百分号表示比例.推荐百分号
    b.高度 size 直接写数字表示像素,加上百分号表示比例.推荐百分号
    c.颜色 color 
    d.对齐方式  align="right"   left在左边 center在中间 right在右边
    <hr color="#FF9900" width="20%" size="8%" align="right">


    D.居中标签的效果
    <center> 标签名称 ... </center>

5、特殊指令

    A.空格效果 &nbsp;
    B.请参考 CHM格式笔记. -> E扩展补充 -> b阶段html -> 04特殊字符编码表对照

6、图片标签 img

    A.基本格式
    <img src="路径">   <!-- 可以是网络路径,也可以是相对路径,不推荐绝对路径-->


    B.设置图片的大小对齐位置
    a.大小设置 width 宽度, height 高度
    b.设置对齐方式 align

    <img src="mm01.png" width="10%" height="10%" align="right"/>


    C.相对路径的问题
    a.图片和网页在同一个目录 <img src="mm01.png"/>
    b.图片在其他目录,网页    <img src="../img/mm01.png"/>  网页在src图片在img ../返回上一层
    c.图片在其他目录,网页    <img src="img/mm01.png"/>     图片在网页的子目录

7、列表标签

    A.有序列表 ol
    <ol type="A">
        <li> Java </li>
        <li> UI </li>
        <li> Python </li>
        <li> PHP </li>
        <li> 前端 </li>
    </ol>


    B.无序列表 ul
    <ul>
        <li> Java </li>
        <li> UI </li>
        <li> Python </li>
        <li> PHP </li>
        <li> 前端 </li>
    </ul>

8、超链接标签 a

    A.基础语法
    <a href="http://www.baidu.com" target="_blank"> 点击访问百度网址 </a>


    B.属性
    href 可以是内网地址,可以是外网地址,可以是图片,可以是文本
    target 不写默认是在自己的页面打开,设置 _blank 在新的页面打开

9、后期学习的标签

    A.两个标签
    <span> 有多大空间占据多大空间 </span> 
    <div> 独占一行 </div>


    B.语义化标签(了解)
    <header> </header> HTML5后的头标签.只是阅读性高一点,没有实质的作用
    <footer> </footer> HTML5后的脚标签.只是阅读性高一点,没有实质的作用

10、表格标签

    A.基础代码
    <table border="1px" align="center" width="80%">
        <tr>
            <th> 表头第一列 </th>
            <th> 表头第二列 </th>
            <th> 表头第三列 </th>
        </tr>
        <tr>
            <td> 第一行第一列 </td>
            <td> 第一行第二列 </td>
            <td> 第一行第三列 </td>
        </tr>
        <tr>
            <td> 第二行第一列 </td>
            <td> 第二行第二列 </td>
            <td> 第二行第三列 </td>
        </tr>
    </table>


    B.合并单元格
    a.两个属性
        colspan：合并列
        rowspan：合并行

    b.操作步骤
        I.确定是合并行 还是 合并列
        II.确定第一次出现的单元格是哪一个
        III.删除其他不要的行或者列

俊哥哥来也

关注

9
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
HTML基础语法

一.HTML基础语法1. 概念：是最基础的网页开发语言含义: Hyper Text Markup Language 超文本标记语言超文本: 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本. 标记语言: 由标签构成的语言。&lt;标签名称&gt; 如 html，xml 标...
复制链接

扫一扫

专栏目录