html基础语法看这一篇就够了！

在这里插入图片描述

HTML

一概念

html:html 文件根标签
head:编写页面相关的属性
title:页面标题
body:页面内容展示信息

二 DOM 树：

所有的标签都是 html 的子标签
head 和 body 是兄弟标签，同一级别
head 和 title 为父子标签

1.第一个程序

<html>
  <head>
    <title>标题</title>
  </head>

  <body>
    hello world
  </body>
</html>

三快速生成代码框架

！+ 回车

快速生成的模板：

<!DOCTYPE html>
<!-- 指定当前html版本为5 -->
<html lang="en">
  <!--指定当前页面为英文-->
  <head>
    <meta charset="UTF-8" />
    <!--浏览器解码规则-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--移动端适配-->

    <title>Document</title>
  </head>
  <body></body>
</html>

四 html 的标签

1.注释标签

ctrl+/ 一行变为注释

2.标题标签 h1-h6

数字越大，则字体越小

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

3.段落标签

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>

4.换行标签

默认换行标签换行之后间隙比段落标签间隙要小

<br />规范 <br />不规范

5.格式化标签

(1)加粗标签

<strong>加粗</strong>
<b>加粗</b>

(2)倾斜标签

<em>倾斜</em>
<i>倾斜</i>

(3)删除线标签

<del>倾斜</del>
<s>倾斜</s>

(4)下划线标签

<ins>倾斜</ins>
<u>倾斜</u>

6.图像标签

1.img 标签

src 属性
img 标签必须搭配 src 来使用，src 是用来指定照片路径

(1)相对路径

./xxx.png 当前路径的 xxx 照片
./img/xx.png 当前路径的 img 文件夹下 xxx 照片
…/xx.png 上一个路径的 xxx 照片

<img src="照片路径" />

(2)绝对路径

图片路径

<img src="照片路径" />

网络上的图片资源

<img src="照片路径" />

2.src 属性

(1)alt 属性

<img src="照片路径" alt="此照片加载失败" />

(2)title 属性

<img src="照片路径" title="这是图片的标题" />

(3)width/heigh 控制宽度高度

高度和宽度一般改一个就行，另外一个会等比缩放，否则就会造成图片失衡。

<img src="照片路径" height="100px" />

(4)border 属性边框

<img src="照片路径" border="10px" />

7.a 标签

href：必须具备，表示点击后会跳转到那个页面
target：打开方式，默认是_self，，如果是_blank 则用新标签页打开

1. href

<a href="网址">文字内容</a>

<a href="#">不做任何跳转，只在当前页面</a>

<a href="http://www.baidu.com">
  <!--通过图片的超链接-->
  <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="" />
</a>

2. target

是否打开新页面
默认就是在当前页面打开新页面

<a href="www.baid.com" target="_blank"></a>

<a href="www.baid.com" target="_self"></a>

8.表格标签

table：表示整个表格
tr：表示表格的一行
td：表示一个单元格
th：表示表头的单元格。会居中加粗
thead：表格的头部区域(与 th 区分，范围比 th 大)
tbody：表格的内容区域

table 包含 tr；tr 包含 td 或者 th

shift+alt+向下直接将选中的内容向下复制

边框：

<table border="10px"></table>

大小：

<table width="500" height="300"></table>

单元格之间的间距：

<table cellspacing="0"></table>

内容距离边框的距离：

<table cellpadding></table>

控制表格整体位置：

<table align="center"></table>
<!--left center right-->

表头区域 thead
thead 中的内容是居中+加粗表示

<thead>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
</thead>

表格内容区域 tbody

<tbody>
  <tr>
    <td>张三</td>
    <td>男性</td>
    <td>12</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>女性</td>
    <td>4</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>女性</td>
    <td>56</td>
  </tr>
</tbody>

单元格合并

行合并：

<tbody>
  <tr>
    <td>张三</td>
    <td rowspan="2">男性</td>
    <td>12</td>
  </tr>
  <tr>
    <td>李四</td>
    <!-- <td>男性</td> -->
    <td>4</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>女性</td>
    <td>56</td>
  </tr>
</tbody>

列合并:

<tbody>
  <tr>
    <td>张三</td>
    <td>男性</td>
    <td>12</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>男性</td>
    <td>4</td>
  </tr>
  <tr>
    <td colspan="2">王五</td>
    <td>女性</td>
    <td>56</td>
  </tr>
</tbody>

9.列表标签

无序列表: ul li
有序列表：ol li
自定义列表：dl(总标签) dt(小标题) dd(围绕标题来说明)

1.无序列表

ul li

快捷键：ul>li*4

<body>
  <h1>这是无序列表</h1>

  <ul>
    <li>这是内容1</li>
    <li>这是内容2</li>
    <li>这是内容3</li>
    <li>这是内容4</li>
  </ul>
</body>

(1).属性

type

disc 无序列表默认的实心圆点
square 实心黑方块
circle 空心圆圈

<body>
  <h1>这是无序列表</h1>

  <ul type="circle">
    <li>这是内容1</li>
    <li>这是内容2</li>
    <li>这是内容3</li>
    <li>这是内容4</li>
  </ul>
</body>

2.有序列表

ol li

<h1>这是有序列表</h1>
<ol>
  <li>这是内容1</li>
  <li>这是内容2</li>
  <li>这是内容3</li>
  <li>这是内容4</li>
</ol>

(1).属性

type

a 表示小写英文字母编号
A 表示大写英文字母编号
i 表示小写罗马字母编号
I 表示大写罗马字母编号
1 表示数字编号(默认)

<h1>这是有序列表</h1>
<ol type="I">
  <li>这是内容1</li>
  <li>这是内容2</li>
  <li>这是内容3</li>
  <li>这是内容4</li>
</ol>

start

决定从那个数字开始计数

<h1>这是有序列表</h1>
<ol type="I" start="2">
  <li>这是内容1</li>
  <li>这是内容2</li>
  <li>这是内容3</li>
  <li>这是内容4</li>
</ol>

3.自定义列表

dl dt dd

<h1>自定义列表</h1>
<h1>自定义列表</h1>
<dl>
    <dt>我的朋友们
        <dd>老三</dd>
        <dd>王五</dd>
        <dd>mike</dd>
    </dt>
</dl>

10.表单标签

form
用表单标签来完成服务器的一次交互

分为两个部分

表单域：包含表单元素的区域重点是 form 标签。
表单控件：输入框，提交按钮等，重点是 input 标签。

1.属性

(1)action

<form action="服务器地址"></form>

(2)input

文本框

<input type="text" />

单行输入

<form action="">姓名<input type="text" /></form>

密码框

<form action="">密码<input type="password" /></form>

单选框

单选

此时还不是单选框，男女都可以选

<form action="">性别<input type="radio" />男 <input type="radio" />女</form>

name="gender"相等的只能选其中的一个

<form action="">
  性别<input type="radio" name="gender" />男
  <input type="radio" name="gender" />女
</form>

默认开始选择,checked="checked"所在的地方就是默认值

<form action="">
  性别<input type="radio" name="gender" checked="checked" />男
  <input type="radio" name="gender" />女
</form>

复选框

多选

<form action="">
  爱好<input type="checkbox" />吃饭 <input type="checkbox" />睡觉
  <input type="checkbox" />玩游戏
</form>

普通按钮

<form action="">
  <input type="button" value="这是一个普通按钮" />
</form>

应用
点击后弹出 hello

<input type="button" value="这是一个普通按钮" onclick="alert('hello')" />

提交按钮

提交按钮必须放到 form 标签内，点击后就会尝试给服务器发送

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

目标网址为百度一下

<form action="http://www.baidu.com">
  用户名<input type="text" name="user" />
  <br />
  密码<input type="password" />
  <br />
  <input type="submit" />
</form>

重置按钮 reset

<form action="http://www.baidu.com">
  用户名<input type="text" name="user" />
  <br />
  <input type="submit" />
  <input type="reset" /><!--重置按钮-->
</form>

选择文件(提交文件)

<form action="http://www.baidu.com">
  <input type="file" />
</form>

(3)label

通常与 input 搭配使用

<label for="存放关联的id">文本</label>

例如:

<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />

(4)select

通常搭配 option 使用

option 标签
属性:
selected 表示默认选择那个选项

<select name="" id="">
  <option valut="">--请选择年份--=</option>
  <option valut="" selected>--1990--=</option>
  <!--selected表示默认选择哪一个-->
  <option valut="">--1991--=</option>
  <option valut="">--1992--=</option>
  <option valut="">--1993--=</option>
  <option valut="">--1994--=</option>
</select>

(5)textarea

属性
rows:长
cols:高

<textarea name="" rows="30" cols="10"></textarea>

11.无语义标签 div&span

div 标签，divsion 的缩写，含义是分割
span 标签含义是跨度
div 是独占一行，是一个大盒子
span 是不独占一行，是一个小盒子

无语义标签无固定用途
拿着这个标签啥都可以干

12.HTML 特殊字符

空格： ` `

小于号：`<`

大于号：`>`

按位与：`&`

在这里插入图片描述