HTML课程总结

混子王江江

于 2022-05-12 18:52:22 发布

阅读量496

点赞数 3

分类专栏： WEB 文章标签： html css css3

本文链接：https://blog.csdn.net/qq_52215423/article/details/124705802

版权

WEB 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

#HTML

简介：它是一种超文本标记语言（HyperText Markup Language），定义了网页的含义和结构。（注：HTML不是一种编程语言）。

##HTML文件结构
*一个完整的HTML文件主要包含两部分:
.头部：、内容：。
.头部主要用来设置内部样式表(CSS)、或者引入外部样式表、或者引入文件等。
.body部分主要是对带有大量的标签对内容进行编写的结构，把你想要显示的内容写在body里。
*HTML元素
.HTML通常使用"标记"(标签)来注明文本、图片和其他内容，例如：

，，，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img/>，</span><aside>，，，，，，<nav>，，，等等。 .通过对HTML文档的观察发现,整个HTML由元素构成，元素则一般由一对标签构成。标签一般由开始标签和结束标签构成，两个标签之间可以书写文本。 .剖析HTML文档： </nav></aside></div></p></section></article></footer></header>

<!DOCTYPE html>//声明文档类型
<html lang="en">//指定网页的内容是英语
<head>
    <meta charset="UTF-8">//字符集声明
    <meta http-equiv="X-UA-Compatible" content="IE=edge">//好像是指定打开的浏览器
    <meta name="viewport" content="width=device-width, initial-scale=1.0">//母鸡啊
    <title>Document</title>//设置页面标题，会出现在浏览器标签上
</head>
<body>
    
</body>
</html>

*HTML文档的一些使用说明：
.注释：< !-- -->, 快捷键为：ctrl+/ , HTML不区分标签大小写。
.空元素:只有一个开始标签(也叫做自结束标签)，通常用于在此元素所在位置进行插入或者嵌入一些东西。
.元素的属性:
例如：title、type等。属性名后面跟着一个"=",一个属性值由一对引号括起来。

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

##标签
###标题(heading)
有< h1 >~< h6 >、标题字体逐渐变小，均以 “/”+标签进行结束。
作用：

1搜索引擎依靠标题进行索引页面内容。
2、能够吸引用户。
注：不要为了字体变大而使用标题标签(建议通过CSS)。

###文本格式的标签(经常用的)
1、< p>~< /p>，显示文字内容的
2、< mark>~< /mark>，显示文字的高亮
3、< d e l>~< /d e l>，删除文本内容
大多数浏览器会改写为删除文本和下划线文本。
一些老式的浏览器会把删除文本和下划线文本显示为普通文本。
4、< s>~< /s>，添加标记删除线文本，html 5中只支持< s >。
5、< i n s> ~ < / i n s>，定义标签内容已经插入。一般与配合使用进行文档的更新使用。
6、< u>~< /u>，给指定的文本内容划定下划线。
7、< small>~< /small>，使得标签内容呈现小号字体效果。
8、< strong>~< /strong>，把文本定义为语气强烈的强调内容。
9、< em>~< /em>,强调文本内容。
###超链接(a)
我们可以在图片、文本等地方加上超链接进行跳转。
语法：

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

剖析：
1、href内需要填写跳转的地址。
2、target有两个可选值：

1、_blank在新页面打开超链接
2、_self在当前页面打开(默认值)

3、< a>~< /a>内是用户看得到且供用户点击的内容。
*锚点
说明：也称作书签，用于标记页面的某个元素位置，进行长页面的跳转。

使用id属性生成某元素的锚点，再使用超链接指向该锚点

注：在锚点的超链接地址中需要前面带有"#"号。
###图片标签及文件路径
图片：

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

1、src后需填写文件地址
2、alt为占位符，当图片异常显示时进行提示。

注：对于小尺寸图片可以用base64进行编码，可以提高页面加载速度。(另外谷歌的webp格式的图片也不错)。
*相对文件路径

./表示当前目录，…/表示上一级目录

###表格标签
< table>~< /table>进行建表，tr表示行，在表头部使用th表示列(相对td有加粗效果)，此外用td。

<table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

###列表标签
####无序列表
无序列表使用< ul>~< /ul>

默认使用实心原点作为每项标志。有空心圆、实心方块等可选值。

####有序列表
有序列表使用< ol>~< /ol>

默认使用数字作为每项的标志，还有大写字母、小写字母、罗马字母等可选值。

注：列表里一般使用< li>~< /li>标签。
###表单标签
< form>~< /form>
当网站需要获取我们的一些信息，可以将这些信息全都装填在表单中进行提交。
示例：

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<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>
  <!-- 下拉列表，注意 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>

注：表单中提交时必须有name属性，并且表单提交后是将value的值交给服务器。
###补充标签
####区块元素和内联元素。
特点：区块元素无论元素是否占满，都会独占一行，而内联元素由元素位置和内容决定，一个接一个。
区块元素有：

< h1>，< pre>、< ul>、< table>、< div>等

内联元素有：

< span>、< input>、< td>、< a>、< img>等

####pre标签
内容区是怎么写的，保存原有格式。
####实体

空格：&nbsp
“<”：&lt
“>”：&gt

完结

混子王江江

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML课程总结

#HTML简介：它是一种超文本标记语言（HyperText Markup Language），定义了网页的含义和结构。（注：HTML不是一种编程语言）。##HTML文件结构*一个完整的HTML文件主要包含两部分:.头部：、内容：。.头部主要用来设置内部样式表(CSS)、或者引入外部样式表、或者引入文件等。.body部分主要是对带有大量的标签对内容进行编写的结构，把你想要显示的内容写在body里。*HTML元素.HTML通常使用"标记"(标签)来注明文本、图片和其他内容，例如：，，，
复制链接

扫一扫