html标签

html:5+tab

可以生成初始html头文件

<!--声明了html版本，告诉浏览器用哪个版本渲染网页-->
<!DOCTYPE html>
<!--代表了一个html文件的开始，所有代码必须写在里面-->
<html lang="en">
<!--头文件-->
<head>
<!--网页编码格式，常用UTF-8，不用UTF-8可能会造成含有中文的代码无法保存-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--网页标题-->
    <title>Document</title>
    <!--搜索使用，网页概述，类似于网页的简介-->
    <meta name="description" content="描述内容">
    <!--搜索使用，网页关键词，搜索类似关键词会显示该网页-->
    <meta name="keywords" content="关键词内容">
</head>
<body>
    <!--正式代码-->
</body>
</html>

html基础标签

块级元素和行级元素的区别

<!--块级元素-->
<div></div>
<p></p>
<ul></ul>
<ol></ol>
<il></il>
h1~h6
<!--行级元素-->
<span></span>
<a></a>

上述标签都是块级元素，即自己单独占一行不需要换行，相应的还有行级元素，如果想要每个标签里的元素自己单独占一行就需要换行标签

</br>

块级元素:

例子如下

<div>123456</div>
<div>67899</div>

结果：

123456
67899

行级元素:

<span>123456</span>
<span>67899</span>

结果：

123456 67899

行级元素加换行上标签:

<span>123456</span></br>
<span>67899</span>

结果：

123456
67899

html标签使用方法

1.标题标签

<h1>1</h1>
<h2>1</h2>
<h3>1</h3>
<h4>1</h4>
<h5>1</h5>
<h6>1</h6>

h1~h6标题大小粗细依次减小结果：

1

2.p标签

<p>1234</p>
<p>5678</p>

结果：

1234

5678

p标签会自动将文字分段，一对p标签是一段，两段文字之间会有一定的间距。而普通的块级元素之间没有。

<div>123456</div>
<div>67899</div>

结果：

123456
67899

3.strong标签

将文字加粗

<div><strong>123456</strong></div>

结果：

1234

4.i标签

斜体文字

<div><i>123456</i></div>

123456

5.img标签

<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/mirror-assets/-temp/15719103612027f7df~tplv-t2oaga2asx-image.image" alter="百度">

src标签后加入图片地址链接，连接分为绝对地址和相对地址，绝对地址类似于从互联网上复制的图片地址，地址无法更改。相对地址为本地图片地址，可以随时更改。../代表一级目录，每写一个../就上升一级目录，如果储存在本地，我们需要利用../找到与html文件同级的目录才可以使用。 当链接找不到时，就会显示alter标签中的文字

6.input标签

<input type="" name="" id="">

type的类型决定了inpu的样式

<input type="text" name="" id="">

text类型为普通的输入框，可以输入文本。

<input type="radio" name="uname" id="sname"><lable id="sname">春季</lable>
<input type="radio" name="uname" id="pname"><lable id="pname">夏季</lable>
<input type="radio" name="uname" id="oname"><lable id="oname">秋季</lable>
<input type="radio" name="uname" id="kname"><lable id="kname">冬季</lable>

radio类型为单选框，用name来分组，name相同的为一组,lable标签用来将后方的文字与前方的input标签利用id连接起来。id在当前界面必须是惟一的，不能重名。只有使用了lable标签当选中夏季前方的按钮使，系统才会知道我们选的是夏季。

7.form标签

<form action="">
<button type="submit"></button>
</form>

action后写入跳转的地址，再点击button提交时，就会将form中的数据提交到action后的指定网页。

8.button标签

<button type="button"></button>

button按钮标签，当type类型为button时就是一个普通的按钮。没有作用。type="submit"时即拥有把这一页的数据提交到指定网页的作用。当然这需要与form标签配合使用。

9.ul/ol+il

<ul>
   <il>1</il>
   <il>2</il>
   <il>3</il>
</ul>

ul+il标签为无序列表
结果：

1
2
3 ol+il标签为有序列表

<ol>
   <il>1</il>
   <il>2</il>
   <il>3</il>
</ol>

结果:
1.1
2.2
3.3

10.select+option下拉列表

<select>
   <option>111</option>
   <option>222</option>
   <option>333</option>
   <option>444</option>
   <option>555</option>
   <option>666</option>
</select>

11.textarea文本框

<textarea rows=“” cols=“”  style="overflow: hidden;"></textarea>

rows表示行 cols表示列，换句话rows为长，cols为宽。当加上style="overflow:hidden;"时如果输入的文字过多超过设定的行列大小时，就会出现下拉条。这条语句的意思是溢出隐藏，css中常常会用到。