前端开发【第1篇：HTML】

时间 2019-12-11

标签前端开发第1篇：HTML 栏目 HTML 繁體版

原文原文链接

HTML初识

一、什么是HTMLjavascript

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

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

二、网页的组成html

咱们平时看到的网页通常由3个部分组成：java

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

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

HTML页面

head

一、页面编码浏览器

<meta charset="UTF-8">

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

<!-- 设置页面每5秒刷新一次 -->
<meta http-equiv="refresh" content="5">
<!-- 设置进入到当前页面1秒后,跳转到指定的Url-->
<meta http-equiv="refresh" Content="1;Url=https://www.cnblogs.com/zhouxiaoming123/" />

三、关键字布局

关键字的做用：通常是让爬虫之类的收录程序，当他们在爬你的网站的时候，若是你有关键字，那么他们会优先把关键字收录到他们的记录中，好比搜狗：若是他们收录以后，他们搜索你的关键字的时候，就能找到我们的网站。测试

<!-- 关键字设定 -->
<meta name="keywords" content="博客,HTML博客">

四、描述动画

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

五、title

<!-- 网页头部标题 -->
<title>Title</title>

六、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>

七、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>

经常使用标签

一、p标签和br标签

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

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

二、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>

三、H标签

即标题标签,代码以下

    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>

四、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>

五、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"/>

效果图以下:

六、多行文本框

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

效果图以下：

七、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>

效果图以下：

八、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>

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

九、列表 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>

效果以下图：

十、表格

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;

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

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

三、元素宽度在不设置的状况下，是它自己父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素特色：display:inline;

一、和其余元素都在一行上；

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

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

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

一、和其余元素都在一行上；

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

注意

咱们能够经过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> ❌

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

h一、h二、h三、h四、h五、h六、p