html总结

cqjtuwz

已于 2022-07-09 17:59:47 修改

阅读量116

点赞数

文章标签： html

于 2022-05-17 20:43:36 首次发布

本文链接：https://blog.csdn.net/qq_57160761/article/details/124827680

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、html是什么？
二、HTML文档结构
- 1.元素
- 2.其它
总结

前言

本次web技术基础课程学习了html的本分基础技术，本文将会对本人之前学习的html的主要知识点进行总结。

一、html是什么？

html是超文本标记语言，我们用html来构建Web页面。它定义了网页内容的含义和结构。

二、HTML文档结构

1.元素

HTML 标记包含一些规定的"元素"如head，title，body，header，footer，articl，section，p，div，span，img，aside，audio，canvas，datalist，details，embed，nav，output，progress，video等等。

<p>段落标签</p> 
<h1>一级标题</h1>
<h2>二级标题</h2>
....
<h6>六级标题</h6>
<head>头元素（这里的内容包括了在搜索结果中出现的关键字，css样式等）</head>
<title>页面标题，出现在浏览器标签上</title>
<body>内容包含了所有的页面可视内容，文本图片等</body>

空元素一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如
,

, , , 等等。我们称其为空元素，如下：

<!-- 换行br -->
<p>我可以<br>换行</p> 
<!-- 水平分割线hr -->
<hr>
<!-- 输入框input -->
<input>

元素属性
元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。一个属性必须包含如下内容：

1、一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
2、属性名称，后面跟着一个 = 号。
3、一个属性值，由一对引号 “” 引起来。

<!-- 带属性的段落输入框 -->
<p title="这是个title属性"></p>
<!-- 带属性的输入框 -->
<!--输入的是文本-->
<input type="text">
<!--密码型的输入框-->
<input type="password">

文本格式
一些文本样式的元素如mark，del，s，ins，u，small等可以将需要标注的内容放在其中

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

显示效果如下在这里插入图片描述
超链接
超链接的使用元素为a,一些使用方法和说明如下：

    <a href="www.baidu.com">www.taobao.com</a>
    <!-- 以上是简单的钓鱼网站的做法，即显示与实际跳转到的网页目标不符合 -->
    <!-- 没有target，当前页面直接跳转 -->
    <a href="www.baidu.com" target="_blank"></a>
    <!-- 有target新的页面进行跳转 -->

还可以利用超链接在页面内部进行跳转，如跳转到某个元素的位置。
图片及文件路径 img
在页面插入一张图片如下：

<img src="./images/大宝贝儿1.jpg" alt="宝子的图片加载失败">

其中src后的值是图片在本目录文件下的相对位置，同样可以使用绝对位置和网络图片的地址等对图片进行展示。当图片加载失败时就会在图片位置处显示alt属性后的值。
还可以在img元素当中使用width，height等元素设置图片的大小。
同时结合之前的超链接内容，可以将图片设置为超链接。

表格 Table

有时，页面的内容需要用表格来进行呈现。我们使用

等标签即可。另外tr表示行, td表示行中的单元, th是表头的单元（将会加粗显示）：

    <table border="1px solid" cellspacing="0" cellpadding="0">
        <tr>
            <th>寝室号</th>
            <th>名字</th>
        </tr>
        <tr>
            <td>412</td>
            <td>王卓</td>
        </tr>
        <tr>
            <td>412</td>
            <td>周银杰</td>
        </tr>
    </table>

其中table中的属性是对表格划线的操作。显示如下：在这里插入图片描述

列表 List
无序列表使用

标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。

    <ul>
        <li>学校:<input type="text"></li>
        <li>学历：
            <div style="height: 200 ;width: 200;">
                <p>大学<input type="checkbox"></p>
            </div>
        </li>
    </ul>

显示如图：在这里插入图片描述
有序列表使用

标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

    <ol>
        <li>钱</li>
        <li>女人</li>
        <li>房子</li>
        <li>孩子</li>
    </ol>

页面显示如图：在这里插入图片描述
表单 Form
当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。事例如下（包括关于from的一些重要使用批注）：

 <form>
        <!-- 表单中任何一个标签都需要有name属性，没有name属性就不能传输到服务器 -->
        <!-- 文本框，注意有 placeholder 提示符 -->
        用户名：<br>
        <input type="text" name="name" placeholder="请输入用户名" required><br>
        <!-- 密码框 -->
        密码：<br>
        <input type="password" name="ps" placeholder="请输入密码"><br>
        年龄：<br>
        <!-- 数字输入框，注意 min 和 value 属性-->
        <input type="number" name="age" min="18" max="120" value="18"><br>
        <!-- 单选按钮, 注意 checked 属性 -->
        电话号码：<br>
        <input type="tel" name="telnumber"><br>
        性别：<br>
        <input type="radio" name="gender" value="male" checked> 男<br>
        <input type="radio" name="gender" value="female"> 女<br>
        <input type="radio" name="gender" value="other"> 其它<br>
        <!-- name都为gender才能保证只选一个 -->m
        <!-- 下拉列表，注意 selected 属性 -->
        党派：<br>
        <select name="party">
            <option value="D">民主党</option>
            <option value="R" selected>共和党</option>
            <option value="N">无党派</option>
        </select><br>
        <!-- 多选框 -->
        您有哪些交通工具：<br>
        <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
        <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
        <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
        <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
        <!-- 日期选择器 -->
        您的工作日期：<br>
        <input type="date"><br>
        <!-- 文件选择器 -->
        上传您的照片:<br>
        <input type="file" name="photo"><br>
        <!-- 文本输入区域，注意 rows 和 cols 属性 -->
        您的建议：<br>
        <textarea name="message" rows="5" cols="30">
          The cat was playing in the garden.
        </textarea><br>
        <hr>
        <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
        <input type="submit" value="提 交">
        <input type="reset" value="重 置">
    </form>

以上代码的页面显示如图：在这里插入图片描述

2.其它

需要注意的是HTML 的元素可以分为区块元素和内联元素。
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：h1, pre, ul, table，div 等。
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： span, input, td, a, img等。

预设格式
如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。注意对比使用p元素与pre元素的区别

    <pre>
        <h1>我如果爱你——</h1>
        绝不象攀援的凌霄花，
        借你的高枝炫耀自己；	
       
       	我如果爱你——
        绝不学痴情的鸟儿，
        为绿荫重复单调的歌曲；
    </pre>
    <p>
    <h1>我如果爱你——</h1>
        绝不象攀援的凌霄花，
        借你的高枝炫耀自己；	
       
       	我如果爱你——
        绝不学痴情的鸟儿，
        为绿荫重复单调的歌曲；
    </p>