前端开发【第1篇:HTML】

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篇:HTML】前端开发【第1篇:HTML】

常用标签

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>

前端开发【第1篇:HTML】

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>

前端开发【第1篇:HTML】

前端开发【第1篇:HTML】

select标签:label属性-分组

<select title="地名选择">
<optgroup label="四川省">
<option>成都</option>
<option>宜宾</option>
</optgroup>
<optgroup label="山西省">
<option>太原</option>
<option>平遥</option>
</optgroup>
</select>

前端开发【第1篇:HTML】

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,为默认选择"-->

前端开发【第1篇:HTML】

input:radio标签-单选框

<!--对于input标签来说只要,radio的name值相同,那么他们就会互斥一般用在给用户几个选项用户单选-->
<p>
用户性别:
<input type="radio" name="sexrdo" value="男">男
<input type="radio" name="sexrdo" value="女" checked=''>女
</p>

前端开发【第1篇:HTML】

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

<!--标准的输入框-->
<input title="普通文本框" type="text"/>
<!--密码的输入框(输入的内容是保密的)-->
<input title="密码输入框" type="password"/>

前端开发【第1篇:HTML】

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

<!-- 普通的按钮 disabled属性有值就禁用该按钮-->
<input type="button" value="普通按钮"/>
<!-- 用来提交表单的按钮,一般放在form表单里面 -->
<input type="submit" value="表单提交按钮"/>

前端开发【第1篇:HTML】

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

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

<input type="file"/>

效果图如下:

前端开发【第1篇:HTML】

6、多行文本框

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

效果图如下:

前端开发【第1篇:HTML】

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>

效果图如下:

前端开发【第1篇:HTML】

8、label标签

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

代码如下:

<div>
<h1>Label标签</h1>
姓名:<input type="text"/>
婚否:<input type="checkbox"/>
</div>

前端开发【第1篇:HTML】

使用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>

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

前端开发【第1篇:HTML】

前端开发【第1篇:HTML】

9、列表 ul/ol/dl

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

<ul>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ul>

效果如下:

前端开发【第1篇:HTML】

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

<ol>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ol>

效果如下:

前端开发【第1篇:HTML】

dl列表自动分组,代码如下:

<dl>
<dt>河北省</dt>
<!--dt是标签,dd是标签里的内容-->
<dd>石家庄</dd>
<dd>衡水市</dd>
<dt>山东省</dt>
<!--dt是标签,dd是标签里的内容-->
<dd>济南市</dd>
<dd>烟台市</dd>
</dl>

效果如下图:

前端开发【第1篇:HTML】

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>

前端开发【第1篇:HTML】

标签分类

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
上一篇:网站性能优化(Yahoo 35条)


下一篇:webpack运行常见错误归纳