前端开发【第1篇：HTML】

2023-08-12 19:59:52

HTML初识

1、什么是HTML

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

你可能早已经注意到了这点，所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。
浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户

2、网页的组成

我们平时看到的网页一般由3个部分组成：

HTML（Hypertext Markup Language）
CSS（Cascade Style Sheets）
JavaScript

上面3个分别可以理解为：视图、表现、行为(HTML可以理解为一个动画小人，CSS为它穿上美丽的衣服，JavaScript让它变的可以跳舞）

HTML页面

head

1、页面编码

<meta charset="UTF-8">

2、设置刷新时间和页面跳转

<!-- 设置页面每5秒刷新一次 -->

<meta http-equiv="refresh" content="5">

<!-- 设置进入到当前页面1秒后,跳转到指定的Url-->

<meta http-equiv="refresh" Content="1;Url=https://www.cnblogs.com/zhouxiaoming123/" />

3、关键字

关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如搜狗：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。

<!-- 关键字设定 -->

<meta name="keywords" content="博客,HTML博客">

4、描述

<!-- 描述网站或页面 -->

<meta name="description" content="描述性内容:这是一个测试页面">

5、title

<!-- 网页头部标题 -->

<title>Title</title>

6、style

一般建议css放在head中不管是引用还是直接在当前页面定义css,因为页面加载自上而下

<!-- 引入CSS样式文件 -->

<link href="/statics/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

<!-- 在当前页面写入CSS样式 -->

<style>

    .class-shuaige{

        color:red;

    }

</style>

7、JavaScript

一般建议放到body里面,当然这也不是绝对的,根据实际需要来吧

<!-- 引入外部JavaScript文件 -->

<script src="/statics/assets/scripts/flatpickr.min.js"></script>

<!-- 在当前页面定义JavaScript -->

<script type="application/javascript">

    console.log("Hello World")

</script>

body

body是内容的存放地

HTML常用标签

标签分类

HTML中的标签分为两类：块级标签和内联标签

块级标签：

每个块级元素都从新的一行开始，并且其后的元素也另起一行
元素的高度、宽度、行高以及顶和底边距都可设置
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度

内联标签：根据实际使用的大小展示

和其他元素都在一行上
元素的高度、宽度、行高及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。

在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。

如下代码就是将块状元素div转换为内联元素，从页使用div元素具有内联元素特点。

例子：

<!--在这里写内容,且这是html中的注释-->

<div style="color:green;  " >这是块级标签</div>

<!-- 定义内联标签,这里定义内联标签的高度属性样式无效 -->

<span style="height: 100px;color:blueviolet">这是内联标签</span>

常用标签

1、p标签和br标签

每一个P标签是独立的一行它是块级标签,<br/>的作用是换行

    <p>每一个P标签包含的内容是独立的一行</p>

    <p>每一个P标签包含的内容是独立的一行</p>

    <p>每一个P标签包含的内容<br>是独立的一行</p>

2、a标签

它有两个作用：跳转和锚点[跳转或者设定锚点]

    <div>

        <!-- a标签跳转,在当前页打开a标签内的Url -->

        <a href="https://www.cnblogs.com/zhouxiaoming123/">我的博客</a>

        <!-- a标签跳转,在新的页打开a标签内的Url.默认target=_self -->

        <a target="_blank" href="https://www.cnblogs.com/zhouxiaoming123/">我的博客</a>

    </div>

    <!-- 跳转至锚点标签 -->

    <a href="#anchor">destination</a>

    <div style="height: 1000px"> 为了达到跳转效果在跳转点和锚点之间加了1个1000px的块级标签</div>

    <!-- 定义锚点标签/这个锚点也可以是id="anchor"-->

    <a name="anchor">destination is here!!!</a>

3、H标签

即标题标签,代码如下

    <h1>H1</h1>

    <h2>H2</h2>

    <h3>H3</h3>

    <h4>H4</h4>

    <h5>H5</h5>

    <h6>H6</h6>

4、select标签

select标签:title属性和默认选中

            <!--

            这里默认是成都因为selected="selected" 这里设置了默认的！

            select标签中title属性的作用就是当鼠标移动到select标签上后的提示

            并且一般我们的select/input/file/textarea 等标签都会在使用的时候放到form标签中

            -->

            <select title="地名选择">

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

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

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

            </select>

select标签：size属性-展示几个元

select标签：multiple属性-多选

在不同操作系统中，选择多个选项的差异：

- 对于 windows：按住 Ctrl 按钮来选择多个选项
- 对于 Mac：按住 command 按钮来选择多个选项

由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。

提示：可以把 multiple 属性与 size 属性配合使用，来定义可见选项的数目。

<select title="地名选择" multiple="multiple" >

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

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

    <option value="2">广东</option>

    <option value="4">江苏</option>

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

</select>

select标签：label属性-分组

<select title="地名选择">

    <optgroup label="四川省">

        <option>成都</option>

        <option>宜宾</option>

    </optgroup>

    <optgroup label="山西省">

        <option>太原</option>

        <option>平遥</option>

    </optgroup>

</select>

5、input标签

input:checkbox标签-复选框

<p>

    用户爱好：吃

    <input type="checkbox" name="chkhobby" value="吃" checked> 喝

    <input type="checkbox" name="chkhobby" value="喝"> 玩

    <input type="checkbox" name="chkhobox" value="玩"> 乐

    <input type="checkbox" name="chkhobox" value="乐" checked>

</p>

<!--这里加一个标识checked="checked，为默认选择"-->

input:radio标签-单选框

<!--对于input标签来说只要，radio的name值相同，那么他们就会互斥一般用在给用户几个选项用户单选-->

<p>

    用户性别：

    <input type="radio" name="sexrdo" value="男">男

    <input type="radio" name="sexrdo" value="女" checked=''>女

</p>

input:text普通文本框 & password 密码输入框

<!--标准的输入框-->

<input title="普通文本框" type="text"/>

<!--密码的输入框（输入的内容是保密的）-->

<input title="密码输入框" type="password"/>

input:button 普通按钮& submit 表单提交按钮

<!-- 普通的按钮 disabled属性有值就禁用该按钮-->

<input type="button" value="普通按钮"/>

<!-- 用来提交表单的按钮,一般放在form表单里面 -->

<input type="submit" value="表单提交按钮"/>

从表现形式上来看他们很像，但是从功能上来区分他们功能不同

file标签-用来提交文件时使用

<input type="file"/>

效果图如下:

6、多行文本框

<textarea style="height: 100px;width: 100px;"></textarea>

效果图如下：

7、form表单

      <form action="http://www.baidu.com" method="get">

            <!-- input -->

            <!--文本框-->

            <p>

                用户名称：

                <input type="text" name="txtUsename" value="请输入用户名称" readonly>

            </p>

            <p>

                用户密码：

                <input type="password" name="txtUsepwd">

            </p>

            <p>

                确认密码：

                <input type="password" name="txtcfmpwd" disabled>

            </p>

            <!-- 按钮 -->

            <p>

                <input type="submit" name="btnsbt" value="提交">

                <input type="reset" name="btnrst" value="重置">

                <input type="button" name="btnbtn" value="普通按钮">

            </p>

        </form>

效果图如下：

8、label标签

有一种情况，看下图，在不使用label标签的时候，我们只能点进框体里去，否则就不能输入或选择，这样用户体验不是很好：

代码如下：

<div>

    <h1>Label标签</h1>

    姓名:<input type="text"/>

    婚否:<input type="checkbox"/>

</div>

使用label标签，代码如下：

<div>

    <label for="name_1">

        姓名:

        <input id="name_1" type="text"/>

    </label>

    <label for="name_2">

        婚否:<input id="name_2" type="checkbox"/>

    </label>

</div>

显示效果，这里我选择文字的时候也会进入到相应的框体，他类似一个跳转：

9、列表 ul/ol/dl

ul列表在前面自动加“点”，代码如下：

<ul>

    <li>line1</li>

    <li>line2</li>

    <li>line3</li>

</ul>

效果如下：

ol列表在前面自动加“数字”，代码如下：

<ol>

    <li>line1</li>

    <li>line2</li>

    <li>line3</li>

</ol>

效果如下：

dl列表自动分组，代码如下：

<dl>

    <dt>河北省</dt>

    <!--dt是标签，dd是标签里的内容-->

        <dd>石家庄</dd>

        <dd>衡水市</dd>

    <dt>山东省</dt>

    <!--dt是标签，dd是标签里的内容-->

        <dd>济南市</dd>

        <dd>烟台市</dd>

</dl>

效果如下图：

10、表格

rowspan 合并行(竖着合并)

colspan 合并列(横着合并)

    <div class="table">

        <table border="1" cellspacing="0">

            <!--表格头-->

            <thead>

                <!--表格行-->

                <tr>

                    <!--表格列，【注意】这里使用的是th-->

                    <th></th>

                    <th>星期一</th>

                    <th>星期二</th>

                    <th>星期三</th>

                    <th>星期四</th>

                    <th>星期五</th>

                </tr>

            </thead>

            <!--表格主体-->

            <tbody>

                <!--表格行-->

                <tr>

                    <td rowspan="3">上午</td>

                    <!--表格列，【注意】这里使用的是td-->

                    <td>语文</td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <!--表格列，【注意】这里使用的是td-->

                    <td>语文</td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <!--表格列，【注意】这里使用的是td-->

                    <td>语文</td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <td rowspan ="2">下午</td>

                    <!--表格列，【注意】这里使用的是td-->

                    <td >语文</td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

                <tr>

                    <!--表格列，【注意】这里使用的是td-->

                    <td>语文</td>

                    <td>数学</td>

                    <td>英文</td>

                    <td>生物</td>

                    <td>化学</td>

                </tr>

            </tbody>

            <!--表格底部-->

            <tfoot>

                <tr>

                    <td colspan="6">课程表</td>

                </tr>

            </tfoot>

        </table>

    </div>

标签分类

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

常用的块状元素：

<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

常用的行内元素

<a> <span> <br> <i> <em> <strong> <label>

常用的行内块状元素：

<img> <input>

块级元素特点：display:block;

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素特点：display:inline;

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素的特点：display:inline-block;

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置

注意

我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。

标签嵌套规则

块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：

<div><div></div><h1></h1><p><p></div> ✔️

<a href=”#”><span></span></a> ✔️

<span><div></div></span> ❌

块级元素不能放在p标签里面，比如

<p><ol><li></li></ol></p> ❌

<p><div></div></p> ❌

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

h1、h2、h3、h4、h5、h6、p

码农公寓

HTML初识

HTML页面

head

body

HTML常用标签

标签分类

常用标签

1、p标签和br标签

2、a标签

3、H标签

4、select标签

5、input标签

6、多行文本框

7、form表单

8、label标签

9、列表 ul/ol/dl

10、表格

标签分类

常用的块状元素：

常用的行内元素

常用的行内块状元素：

标签嵌套规则

相关文章