HTML超文本标记语言

目录

HTML：超文本标记语言

1.注释

注释是代码之母！

在搭建页面时，通常会利用注释来划分区域。

1.1 单行注释

<!--注释内容-->

2.2 多行注释

其实直接在单行注释里面换行就可以了

<!--
注释内容
注释内容
注释内容
-->

2.文档结构

<html>
	<head></head>  head头不是给人看的，是给浏览器看的
	<body></body>  body内的代码才是给人看的
</html>

3.标签

3.1 HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  1. HTML 标签是由尖括号包围的关键词，比如
  2. HTML 标签大部分是成对出现的，比如 <b> </b>
  3. 标签对中的第一个标签是开始标签，第二个标签是结束标签
  4. 开始和结束标签也被称为开放标签和闭合标签

3.2 标签通常应该有的两个属性

  1. id：就类似于是身份证号，每一个标签，都应该有id值，并且在同一个html文档中，标签的id不能重复
  2. class：类属性，有点类似于面向对象的继承，class = 'c1 c2 c3'，你这个标签就会拥有c1 c2 c3的所有样式

4. 标签的分类

4.1 双标签和自闭合标签

  1. 双标签即为有头有尾的标签，如
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
  1. 自闭合标签即为只有一个箭头括号的标签，如
<img src="图片链接，可以是本地地址，也可以是网络地址"/>

4.2 块级标签和行内标签

  1. 块级标签指在浏览器显示中独占一行的标签，是块级元素
特点：
	1. 块级标签内可以嵌套其他块级标签和行内标签
	2. p标签虽然是块级标签，但是他的内部不能嵌套任何块级标签，只能嵌套行内标签。
举例：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是p标签的效果<s>这是s标签效果</s></p>
<br>
<hr>
<div>这里是div</div>
  1. 行内标签，是内联元素
特点：
	1. 内部文本多大，标签的位置就占多大
	2. 行内不能嵌套行内和块级标签
举例：
<s>这是s标签效果</s>
<i>这是i标签的效果</i>
<u>这是u标签的效果</u>
<b>这是b标签的效果</b>

5.常用标签

5.1 head内常用标签

  1. title：定义网页标题
  2. style：内部支持写css代码
  3. link：引入外部css样式文件
  4. script：内部可以直接写js代码 也可以引入外部js文件
  5. meta：定义网页源信息
<meta charset="UTF-8">
<title>我的第一个HTML文件</title>
<style>样式代码</style>
<link rel="stylesheet" href="scc文件名">
<script src="js文件名"></script>

5.2 body内常用标签

  1. h1~h6：标题标签
  2. p：段落标签 一个p就是一行内容
  3. u：下划线
  4. i：斜体
  5. s：删除线
  6. b：加粗
  7. br：换行
  8. hr：一条分割线
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是p段落标签标签的效果<s>这是s标签效果</s></p>
<u>这是u标签的效果下划线</u>
<i>这是i标签的效果斜体</i>
<s>这是s标签效果删除线</s>
<b>这是b标签的效果加粗</b>
<br>
<hr>

5.3 body内的重要标签

  1. div：一块区域，可用于组合其他HTML元素的容器

  2. span：文本的容器，内联元素

  3. a：连接标签

    • 跳转功能：href参数控制跳转的地址
      • 默认在当前窗口跳转target = "_self"，想在新窗口跳转可设置target = "_blank"
    <a href="https://www.sogo.com" id="1">这里是id=1的标签的位置</a>
    • 锚点功能：给a标签设置id值，然后在href中设置 ‘#+id’ 点击即可跳转到对应的位置。
    <a href="#1">这里可以连接到标签id为1的标签的位置</a>

  4. img：图片标签

    • src属性

      1. 图片地址，网上的地址也可以是你的本地图片地址
      2. url(网址)，自动朝该网址发送get请求 获取图片资源

    • alt属性

      当图片加载不出来的时候 展示的提示信息

    • title属性

      鼠标悬浮上去之后展示的提示信息

    • width和height

      这两个参数你只需要设置一个，就可以默认是等比例缩放，两个都设置的话，图片就会失真

6.特殊符号

1. &nbsp;	空格
2. &amp;	&
3. &yen;	￥
4. &gt;		>
5. &lt;		<
6. &copy;	©
7. &reg;	®

7.列表标签

7.1无序列表

ul+li

type参数：

  1. disc（实心圆点，默认值）
  2. circle（空心圆圈）
  3. square（实心方块）
  4. none（无样式）
<ul>
    <li>
        what1?
    </li>
    <li>
        what2?
    </li>
</ul>

7.2 有序列表

ol+li

type参数：

  1. 1（数字列表，默认值）
  2. A（大写字母）
  3. a（小写字母）
  4. I（大写罗马）
  5. i（小写罗马）
<ol type="a">
    <li>
        what1?
    </li>
    <li>
        what2?
    </li>
</ol>

7.3 标题列表（了解）

dl+dt(小标题)+dd(小章节)

8.表格标签

table 常用于展示数据

属性：

  1. border：表格边框
  2. cellspadding：内边距
  3. cellspacing：外边距
  4. width：像素 百分比（最好通过css来设置长宽）
  5. rowspan：单元格竖跨多少行
  6. colspan：单元格横跨多少列（即合并单元格）
<table>
    <thead>
        <tr>
            <th>number</th>
            <th>name</th>
            <th>age</th>
        </tr>  一个tr就表示一行
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>tbw</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

9.form表单

form表单用于搜集不同类型的用户输入数据，然后打包发给服务器，服务器处理输入数据，返回反馈信息。

<form action="" accept-charset="UTF-8" method="post" enctype="multipart/form-data">
<!--这里输入表单信息-->
</form>

9.1 input 元素

设置一个单行文本框，用来让用户输入信息。

<p>
    用户名：<input type="text">
    <br>
    密码：<input type="text">
</p>

9.1.1 input元素的type属性

input元素可以通过<input type="属性名">的方式来约束在input文本框内输入信息的格式。

①text

输入普通文本信息，任何输入都可以

<input type="text">

②password

输入的信息会变成小点点，让别人看不到

password:<input type="password">

③date

data:<input type="date">

④radio

设置几个选择按钮，且只能选择一个

radio1:<input type="radio" name="r1">
radio2:<input type="radio" name="r2">

⑤checkbox

设置多个按钮，可以多选

checkbox1:<input type="checkbox" name="c1" value="c1">
checkbox2:<input type="checkbox" name="c2" value="c2">
checkbox3:<input type="checkbox" name="c3" value="c3">

⑥file

设置一个按钮，点击这个按钮可以选择文件上传

file:<input type="file">

⑦hidden

隐藏文本框，让文本框看不见

hidden:<input type="hidden">

⑧button

设置一个按钮，点了不出发任何操作

button:<input type="button" value="按钮">

⑨reset

设置一个重置按钮，点击该按钮会将其他文本框内的信息重置

reset:<input type="reset" value="重置">

⑩submit

设置一个提交按钮，可以将本页面的信息提交到服务器

submit:<input type="submit" value="提交">

9.1.2 输入属性

  1. name：表单提交时的“key”，注意和id的区别
  2. value：表单提交时对应项的值
    • type="button", "reset", "submit"时，为按钮上显示的文本年内容
    • type="text","password","hidden"时，为输入框的初始值
    • type="checkbox", "radio", "file"，为输入相关联的值
  3. checked：radio和checkbox默认被选中的项
  4. readonly：text和password设置只读
  5. disabled：所有input均适用，规定该字段是禁用的，不可点击，不会被提交

9.2 select 元素

设置一个下拉列表，可以让用户选择，比如你注册账户，人家让你选择你的省份，是不是就是一个下拉列表？

<p>想要去哪旅游？
    <select name="country" id="1">
        <!--option即为每一条选项-->
        <option value="泰国">泰国</option>
        <option value="新加坡">新加坡</option>
        <option value="印度尼西亚">印度尼西亚</option>
    </select>
</p>

9.3 textarea 元素

设置一个多行文本框，可以让用户输入多行信息。

<p>请输入身份信息：
    <textarea name="test" id="2" cols="30" rows="10"></textarea>
</p>

9.4 button 元素

设置一个按钮，可以点击，并且将点击这个操作获得的信息提交服务端。

<button>点一下，你的朋友长胖20斤！</button>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/bowendown/p/11852901.html