HTML笔记

SQ有空就喝水
137 阅读7分钟

HTML 是什么

HTML是指超文本标记语言。 超文本指的是将网页(HTML文档)链接在一起的方式。因此，网页上可用的链接被称为超文本。HTML是学习Web开发人员最基本的技能。
HTML是Berners-Lee在1991年底创建的，但“HTML 2.0”是1995年发布的第一个标准HTML规范。HTML 4.01是HTML的主要版本，于1995年底出版。虽然HTML 4.01版本被广泛使用，但目前我们有HTML-5版本，它是HTML 4.01的扩展，这个版本是2012年发布的。它是网站建设的基础，你肯定需要HTML，无论你使用的是哪种框架或库。这是一个标准化的系统。
BOILERPLATE是HTML页面的基本结构。HTML是网页的结构。它与CSS或JavaScript不一样。
HTML只处理页面的物理结构，例如，文本、图像、按钮、文本输入字段、表单。本质上是指网页的“建筑块或内容”。
纯HTML的结果是乏味的，简单的(丑陋的)。
CSS使它看起来很漂亮，很赏心悦目。
JavaScript通过交互性和动态性使它变得生动起来。

HTML 起手应该写什么

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document

</title>

</head>

<body>

</body>

</html>

<！DOCTYPE html>定义该文档是HTML5文档 。<html>是页面的根元素。
<head>元素包含关于html页面的元信息。
<title>指定html页面的标题。 <head>，<tbody>元素定义了文档的主体，是所有可见内容的容器，如标题、段落、图像、超链接、表、列表等。
html不是一种编程语言，它是一种用于描述网页的标记语言。标记语言是一组标记，html使用这些标记标记来给网页赋予元素。
html标记总是用尖括号 <TAGNAME>包围，有些标记需要一个结束标记，也有些是自结束标记，它们不需要任何结束标记。
需要结束标签的例子有HTML或BODY，它们总是成对出现，一对中的第一个标签是开始标签，第二个标签是结束标签。HTML元素也可以添加属性，它们提供关于元素的额外信息。属性总是在开始标记本身中指定。属性的名称/值对如下:name= " value "。
属性值应该总是用引号括起来。双引号是最常见的，但是单引号也是允许的。

全局属性有哪些

全局属性是可与所有 HTML 元素一起使用的属性。 截屏2022-07-13 01.04.28.png

常用的内容标签有哪些，分别是什么意思

截屏2022-07-13 01.11.08.png

image.png

image.png

image.png

image.png

截屏2022-07-13 01.32.16.png

截屏2022-07-13 01.35.01.png

列表标签

无序列表

<ul>
    <li>列表的每一项内容</li>
    <li>列表的每一项内容</li>
    ....
</ul>
ul里面只能包含li标签
li标签可以包含任意元素
无序列表有默认的小圆点 后续css处理

有序列表

<ol>
    <li>列表的每一项内容</li>
    <li>列表的每一项内容</li>
    ....
</ol>
ol里面只能包含li标签
li标签可以包含任意元素
有序列表有默认的样式 后续css处理.

自定义列表

<dl>
    <dt>列表主体</dt>
    <dd>列表每一项内容</dd>
    <dd>列表每一项内容</dd>
    <dd>列表每一项内容</dd>
    ....
</dl>
dl里面只能包含dt/dd
dt/dd里面可以包含任意元素
自定义列表有默认缩进效果 后续css处理.

表格标签

表格基本语法

<table>
    <tr>
        <td></td> 
        <td></td>
        ...
    </tr>
    ...
</table>
table 表格整体
tr 表格的每一行
td 单元格

表格属性

table属性
    border:边框
    width:宽度
    height:高度
    align:对齐方式(left|center|right)
    rules:all(细线表格)
    cellspacing:设置单元格与单元格之间的距离 默认 2 像素
    cellpadding:设置内容到单元格的距离   默认 1 像素
tr属性
  align:表格的对齐方式(left(左)|center(居中)|right(右))
  bgcolor:设置背景颜色
  bg:background(背景)
  color:颜色


<!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>
  <!-- 
table属性
  border:表格边框
  width:宽度
  height:高度
  align:表格的对齐方式(left(左)|center(居中)|right(右))
  rules:all(细线表格)
  cellspacing:设置单元格与单元格之间的距离
  cellpadding:设置内容到单元格的距离
tr属性
  align:表格的对齐方式(left(左)|center(居中)|right(右))
  bgcolor:设置背景颜色
  bg:background(背景)
  color:颜色
 -->
  <table border="1" width="600" height="200" align="center" cellspacing="0" cellpadding="0">
     <tr>
      <td>姓名</td>
      <td>年龄</td>
      <td>性别</td>
    </tr> 
    <tr align="center" bgcolor="red">
      <td>强</td>
      <td>17</td>
      <td>0</td>
    </tr>
    <tr>
      <td>波</td>
      <td>18</td>
      <td>1</td>
    </tr>
    <tr bgcolor="green">
      <td>小</td>
      <td>21</td>
      <td>女</td>
    </tr>
  </table>
</body>
​
</html>

表头单元格

<th>表头单元格</th>  默认加粗居中效果
 <caption>学生信息管理表</caption>  表格的大标题

  <!-- 表格的标题标签  -->
    <!-- caption 表示表格的大标题 放在table标签里面 -->
    <caption><strong>学生信息管理表</strong></caption>
    <tr>
      <!-- th 表头单元格 放在表格第一行 默认文字加粗居中显示 -->
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>

表格结构标签(了解)

<!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>
  <table border="1" width="600" height="200" align="center" cellspacing="0" cellpadding="0">
    <caption><strong>学生信息管理表</strong></caption>
    <!-- thead  表格的头部-->
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <!--tbody 表格的主体  -->
    <tbody>
      <tr>
        <td>强哥</td>
        <td>17</td>
        <td>人妖</td>
      </tr>
      <tr>
        <td>波哥</td>
        <td>18</td>
        <td>待定</td>
      </tr>
      <tr>
        <td>小美</td>
        <td>21</td>
        <td>女</td>
      </tr>
    </tbody>
    <!-- tfoot 表格的尾部 -->
    <tfoot>
      <tr>
        <td>总结</td>
        <td>嘻嘻</td>
        <td>呵呵</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>

表格合并

跨行合并(垂直合并)

rowspan

跨列合并(水平合并)

colspan

合并步骤:
1. 明确合并方式(跨行/跨列)
2. 通过左上原则，确定保留谁删除谁
   • 上下合并→只保留最上的，删除其他单元格
   • 左右合并→只保留最左的，删除其他单元格
3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
   • `rowspan`：跨行合并→垂直方向合并
   • `colspan`：跨列合并→水平方向合并
删除的单元格个数= 合并的个数-1
示例代码
        <table border="1" width="800" height="200" rules="all" align="center">
                <tr>
                    <td></td>
                    <td></td>
                    <!-- 跨行合并 -->
                    <td rowspan="3"></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <!-- <td></td> -->
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <!-- <td></td> -->
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <!-- 跨列合并 -->
                    <td colspan="3"></td>
                    <!-- <td></td>
                    <td></td> -->
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>

表单标签

input系列

文本框
<input type="text" placeholder="">
密码框
<input type="password" placeholder="">
单选框
<input type="radio" checked name="sex">男
<input type="radio" checked name="sex">女
多选框
<input type="checkbox" checked >
文件上传
multiple:多文件上传
<input type="file" multiple>
提交按钮
<input type="submit" value="提交">
重置按钮
<input type="reset" value="重置" >
普通按钮
<input type="button"value="普通按钮">
搜索框
<input type="search">
图像提交按钮
<input type="image" src="./img/btn.png" alt="">
placeholder:占位符
单选框设置相同的name属性值才可以实现多选一效果
checked 默认被选中

button按钮

<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
后期配合js一起使用-
<button type="button">普通按钮</button>

select下拉菜单

 <select>
    <option value="">--请选择所在城市--</option>
    <option value="" selected>武汉</option>
    <option value="">北京</option>
    <option value="">广州</option>
    <option value="">深圳</option>
  </select>
select 下拉列表整体
option 每一项内容
selected:默认选中

文本域

应用场景: 留言板 评论

 留言板:<textarea placeholder="请您留言"></textarea>

label标签

使用方法一：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
    <label for="nan">男</label>
    <input type="radio" name="sex" id="nan">
    <label for="nv">女</label>
    <input type="radio" name="sex" id="nv">
使用方法二：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
 <label>文本框:<input type="text"></label>

语义化标签

无语义化标签

<div>独占一行</div>
<span>一行显示多个</span>
//div标签，称为区隔标记。作用是设定 页面内容 的摆放位置。
div标签的特性是 独占一行 又被叫做 块级元素。
//span作用是包裹一些可能要自定义样式的。
span标签 不独占一行 又被叫做 行内元素。
//1. div标签和span标签都没有自带的效果。
//2. div标签是用来做区域划分的，就是一个布局标签，并且独占一行。
//3. span标签是在某一行中加入的，是一个行内标签所以不是独占一行。

有语义化标签

<header>网页头部</header>
  <nav>网页导航</nav>
  <footer>网页底部</footer>
  <aside>网页侧边栏</aside>
  <section>网页区块</section>
  <article>网页文章</article>

字符实体

空格  &nbsp;
大于号 &gt;
小于号 &lt;

写pc端网页比较多的标签

<p>段落标签<p>
 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
<strong>加粗</strong>
<em>倾斜</em>
<img src="图片的路径" title="提示文本" alt="替换文本">
<a href="链接地址" target="_blank">链接文本</a>
<ul>
    <li>列表的每一项内容</li>
    <li>列表的每一项内容</li>
    ....
</ul>
<dl>
    <dt>列表主体</dt>
    <dd>列表每一项内容</dd>
    <dd>列表每一项内容</dd>
    <dd>列表每一项内容</dd>
    ....
</dl>
<div>独占一行</div>
<span>一行显示多个</span>
表格基本语法
<table boder="1" width="600" height="200" align="center">
    <tr>
        <td></td> 
        <td></td>
        ...
    </tr>
    ...
</table>

文本框
placeholder 占位符
<input type="text" placeholder="占位符" >
密码框
<input type="password" placeholder="占位符">
单选框
需要设置相同的name属性 实现多选一的效果 
checked 默认选中
<input type="radio">
复选框
checked 默认选中
<input type="checkbox">
<input type="search">

待续

。

avatar
文章
阅读
粉丝