HTML学习

最新推荐文章于 2023-12-04 20:15:26 发布

m0_61422721

最新推荐文章于 2023-12-04 20:15:26 发布

阅读量439

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_61422721/article/details/125887283

版权

一、HTML初始代码

每个.html文件都有的代码叫做初始代码，要复合html文件的规范写法。

! + tab键 : 快速的创建html的初始代码

<!DOCTYPE html>           文档声明 : 告诉浏览器这是一个html文件
<html lang="en"> html文件的最外层标签：包裹着所有html标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站
    <head>
        <meta charset="UTF-8">    元信息：是编写网页中的一些辅助信息 charset="UTF-8"国际编码，让网页不出现乱码的情况
        <title>Document</title>   设置网页的标题
    </head>
    <body>
        显示网页内容的区域
    </body>
</html>

二、HTML注释

写法：

在浏览器中看不到，只能在代码中看到注释的内容。

<!-- hello world -->

意义：

把暂时不用的代码注释起来，方便以后使用。
对开发人员进行提示。

三、标题与段落

标题 -> 双标签 : <h1></h1> ... <h6></h6>

在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。
h5、h6标签在网页中不经常使用。

段落 -> 双标签 : <p></p>

    <h1>标题</h1>
    <h2>标题</h2>
    <h2>标题</h2>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>
    <p>一个段落</p>

四、文本修饰标签

强调 -> 双标签 : <strong></strong>、<em></em>

区别：

写法和展示效果是有区别的，一个加粗、一个斜体
strong的强调性更强，em的强调性稍弱。

下标 : <sub></sub>
上标 : <sup></sup>

删除文本 : <del></del>
插入文本 : <ins></ins>

注意：一般情况下，删除文本都是和插入文本配合使用的

    <p>
        <strong>需要强调的文本</strong>
        <em>需要强调的文本</em>
    </p>
    <p>
        a <sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>  H<sub>2</sub>0
    </p>
    <p>
        原价<del>300</del>，现价<ins>100</ins>。
    </p>

五、图片标签

img -> 单标签

src : 引入图片的地址。
alt : 当图片出现问题的时候，可以显示一段友好的提示文字。
title : 提示信息
width、height : 图片的大小

引入路径

相对路径
绝对路径

    <!-- .在路径中表示当前路径    --> 
    <!-- ..在路径中表示上一级路径 -->

    <img src="./dog.jpg" alt=""> -->
    <img src="./img/animal/dog.jpg" alt="">
    <img src="../img/animal/dog.jpg" alt="">

    <img src="E:/img/animal/dog.jpg" alt="">    
    <img src="/img/animal/dog.jpg" alt="">

六、链接标签

a -> 双标签： <a></a>

href属性 : 链接的地址
target属性 : 可以改变链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开 _blank

base -> 单标签 ：改变链接的默认行为的。

    <a href="http://www.baidu.com" target="_blank">访问百度</a>

锚点

#号 + id属性
#号 + name属性（注意name属性加给的是a标签）

七、特殊字符

& + 字符
解决冲突啊左右尖括号、添加多个空格的实现

八、列表标签

无序列表 -> ul li 符合嵌套的规范
有序列表 -> ol li 一般用的比较少，可以用无序列表来实现
定义列表 -> dl dt dd 列表项需要添加标题和对标题进行描述的内容

注：列表之间可以互相嵌套，形成多层级的列表。

    <ul>
        <li>第一项</li>
        <li>第二项</li>
    </ul>

    <ol type="i">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>

    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
        <dt>JavaScript</dt>
        <dd>网页脚本语言</dd>
    </dl>

九、表格标签

<table>：表格的最外层容器
<tr> ：定义表格行
<th>：定义表头
<td>：定义表格单元
<caption>：定义表格标题

注：有嵌套关系，要符合嵌套规范。

语义化标签：tHead、tBody、tFood

注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。

属性：

border ：表格边框
cellpadding ：单元格内的空间
cellspacing ：单元格之间的空间
rowspan ：合并行
colspan ：合并列
align ：左右对齐方式
valign ：上下对齐方式

    <table border="1" cellpadding="30" cellspacing="30">
        <caption>天气预报</caption>
        <tHead>
            <tr align="right">
                <th colspan="2">日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr valign="top">
                <td rowspan="2">2019年1月1日</td>
                <td>白天</td>
                <td><img src="./img/tianqi_1.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td>夜晚</td>
                <td><img src="./img/tianqi_2.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr valign="bottom">
                <td rowspan="2">2019年1月2日</td>
                <td>白天</td>
                <td><img src="./img/tianqi_1.png" alt=""></td>
                <td>有小雨，出门请带伞</td>
            </tr>
            <tr>
                <td>夜晚</td>
                <td><img src="./img/tianqi_2.png" alt=""></td>
                <td>有小雨，出门请带伞</td>
            </tr>
        </tBody>
        <tFood>

        </tFood>
    </table>

十、表单标签

<form> ：表单的最外层容器
<input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

    <form action="http://www.baidu.com">
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框：</h2>
        <input type="password" placeholder="请输入密码">
        <h2>复选框</h2>
        <input type="checkbox" checked>上海
        <input type="checkbox" checked>苏州
        <input type="checkbox" disabled>扬州
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交和重置</h2>
        <input type="submit">
        <input type="reset">     
    </form>