0基础学习前段历程2 第一门需要掌握的前端技术HTML5+CSS3 html基础知识

# 超文本标签与标签属性

## 小概念的普及

### 前端三层

- HTML搭结构、骨架

- CSS样式（装修）text-decoration: none;

- javascript（JS）交互、动态的效果

### 网页

网页是构成网站的基本要素，HTML文件其实就是一个网页。

### 网站

由多个网页组成的。

### 站群（流水线统一化管理）

由多个网站的组成的，为同一家公司服务

例如：整个百度下所属的子公司都有自己的网站，百度音乐、百度金融、百度外卖...

### 浏览器

最好用的浏览器:谷歌浏览器

IE浏览器

## 网页的基本组成

-HTML 骨架，搭结构的

-CSS  样式，装修

-JS     交互，动态效果

### HTML（超文本标记语言）

网页文件本身是一种文本文件（除了文字暂无其他），只有通过特定的标记描述，这些普通文本才能在浏览器这中正常显示，在页面中如果遇到图片、音视频的时候如何如何用文本描述，需要用**超文本（标签）**进行引入才可以正常显示

<img src=""> 图片

#### 超文本（标签）

标签语法：由成对的尖括号和关键字组成的，叫做标签

关键字: 是已经规范好的，不能自己随便制造的

<div></div>

##### 标签分类

-开始标签：<div>

-结束标签: </div>

-空标签： <br/>    <img src="">

##### HTML元素

-可以将元素理解成一个容器，容器中放置的就是我们网页中的主要内容

 元素（标签）:由标签和内容组成的

##### 元素的分类

-由开始标签和结束标签组成的元素，元素中可以添加内容

-只有一个空标签，只能进行功能的添加，例如<img src="">  <input type="text"> 

## 常用的HTML元素有哪些？

- 标题类:`h1~h6`

- h1标签在HTML页面中只能出现1此，其他标签可以出现多次

- 列表类

- 无序列表 ul  前面默认有小黑点

- 有序列表 ol  前面默认有序号

- 自定义列表  dl（常用在网站的尾部和新闻摘要上）

- 标题dt：只能出现一次

- 描述dd:可以多次出现

- 区分大模块 

<div>区分大模块</div>

- 区分行内小模块 

<span>区分行内小模块</span>

- 段落 

 <p>DEBUG，意为程序除错的意思。为马克1号编制程序的是一位女数学家雷斯.霍波，有一天，她在调试程序时出现故障，拆开继电器后，发现有只飞蛾被夹扁在触点中间.</p>

- 加粗 

<strong>加粗strong,重点强调</strong>

 <b>加粗b</b>

- 斜体

 <em>斜体em，重点强调</em>

<i>斜体i</i>

-  插入图片 img:标签  src:图片地址、路径  alt:图片的描述 

 <img src="1-2-1.webp" alt="房子">

 div/span标签是无意义标签，尽量少用

标签属性

 标签属性提了有关HTML元素更多的信息

 一个标签可以有多个标签属性，每个属性之间用空格隔开

语法：由标签的属性名和标签属性值组成的

<img src="1-2-1.webp" alt="房子">

img 标签

src="" alt="" 属性标签

src是属性名 ""里面得值是属性值

### 超链接、锚点

 a 锚点

 如果想用锚点的效果，浏览器必须出现滚动条

<a href="#top">点击</a>

  

<div id="top">基本信息</div>

 禁止跳转的两种方式

<a href="##">点击</a>第一种

<a href="javascript:;">点击</a>第二种

<a href="">点击</a>可以做回到顶部的效果

<a href+"">回到顶部</a>

### table表格

常用写法

  <!-- 表格 tr是行 td是列-->

    <table border="1">

        <tr>

            <td>1</td>

        </tr>

    </table>

标准写法

    <table>

        <!-- 表格标题 -->

        <caption></caption>

        <!-- 表格头部 -->

        <thead>

            <tr>

                <td></td>

            </tr>

        </thead>

        <!-- 表格主体 -->

        <tbody>

            <tr>

                <td></td>

            </tr>

        </tbody>

        <!-- 表格尾部 -->

        <tfoot>

            <tr>

                <td></td>

            </tr>

        </tfoot>

    </table>

### 表单类

 一般常用在登陆、注册、调差问卷的结构上

 <!-- 表单类 input用来添加表单功能的-->

    <input type="text"> 文本框

    <input type="password">密码框

    <input type="button" value="登陆">提交按钮

    <input type="radio"> 单选按钮

    <input type="checkbox">多选按钮

  

    <br>

    您对登陆页面整体满意吗？

    <br>

    <input type="radio" name="anniu">满意

    <br>

    <input type="radio" name="anniu">不满意

    <br>

    你喜欢我吗？

    <br>

    <input type="checkbox">喜欢

    <br>

    <input type="checkbox">非常喜欢

  
  

    <!-- 文本域 textarea 文本域-->

    <!-- maxlength最大长度  minlength 最小长度 -->

    <textarea maxlength="10" minlength="10">文本域</textarea>

  

    <br>

    <!-- 下拉框 select 下拉框 -->

    <select>

        <option value="">北京</option>

        <option value="">上海</option>

        <option value="">广州</option>

        <option value="">成都</option>

        <option value="">重启</option>

    </select>

   <br>

   <!-- 用来描述表单功能的 -->

    <label for="" placehold="姓名">姓名</label>

    <input type="text">

    <label for="电话"></label>

    <input type="text">

  

|标签|属性|

|--|--|

|h1-h6|标题|

|p|段落|

|span|行内区分小模块|

|div|区分大模块|

|ul>li|无序列表|

|ol>li|有序列表|

|dl>dt，dd|自定义列表，dt是标题项，dd是描述项|

|strong,b|加粗|

|em，i|加粗|

|a|超链接，锚点|

|img|插入图片|

|table|表格|

|tr|行|

|td|列|

|label|用来描述表单功能|

|input|用来添加表单功能|

|select|下拉框|

|textarea|文本域|

|sup|上表|

|sub|下标|

0基础学习前段历程2 第一门需要掌握的前端技术HTML5+CSS3 html基础知识

原文：https://www.cnblogs.com/wrfzxyy/p/12441890.html