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

HTML

一 概念


html:html 文件根标签

head:编写页面相关的属性

title:页面标题

body:页面内容展示信息

二 DOM 树:


所有的标签都是 html 的子标签

head 和 body 是兄弟标签,同一级别

head 和 title 为父子标签

1.第一个程序

html 复制代码
<html>
  <head>
    <title>标题</title>
  </head>

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

三 快速生成代码框架


!+ 回车

快速生成的模板:

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

数字越大,则字体越小

html 复制代码
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

3.段落标签

html 复制代码
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>

4.换行标签

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

html 复制代码
<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 照片

html 复制代码
<img src="照片路径" />
(2)绝对路径

图片路径

html 复制代码
<img src="照片路径" />

网络上的图片资源

html 复制代码
<img src="照片路径" />

2.src 属性

(1)alt 属性
html 复制代码
<img src="照片路径" alt="此照片加载失败" />
(2)title 属性
html 复制代码
<img src="照片路径" title="这是图片的标题" />
(3)width/heigh 控制宽度高度

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

html 复制代码
<img src="照片路径" height="100px" />
(4)border 属性 边框
html 复制代码
<img src="照片路径" border="10px" />

7.a 标签

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

1. href

html 复制代码
<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

是否打开新页面

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

html 复制代码
<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+向下 直接将选中的内容向下复制

  • 边框:
html 复制代码
<table border="10px"></table>
  • 大小:
html 复制代码
<table width="500" height="300"></table>
  • 单元格之间的间距:
html 复制代码
<table cellspacing="0"></table>
  • 内容距离边框的距离:
html 复制代码
<table cellpadding></table>
  • 控制表格整体位置:
html 复制代码
<table align="center"></table>
<!--left center right-->
  • 表头区域 thead
    thead 中的内容是居中+加粗表示
html 复制代码
<thead>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
</thead>
  • 表格内容区域 tbody
html 复制代码
<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>
  • 单元格合并

行合并:

html 复制代码
<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>

列合并:

html 复制代码
<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
html 复制代码
<body>
  <h1>这是无序列表</h1>

  <ul>
    <li>这是内容1</li>
    <li>这是内容2</li>
    <li>这是内容3</li>
    <li>这是内容4</li>
  </ul>
</body>
(1).属性
type
  • disc 无序列表默认的实心圆点
  • square 实心黑方块
  • circle 空心圆圈
html 复制代码
<body>
  <h1>这是无序列表</h1>

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

2.有序列表

ol li

html 复制代码
<h1>这是有序列表</h1>
<ol>
  <li>这是内容1</li>
  <li>这是内容2</li>
  <li>这是内容3</li>
  <li>这是内容4</li>
</ol>
(1).属性
type
  • a 表示小写英文字母编号
  • A 表示大写英文字母编号
  • i 表示小写罗马字母编号
  • I 表示大写罗马字母编号
  • 1 表示数字编号(默认)
html 复制代码
<h1>这是有序列表</h1>
<ol type="I">
  <li>这是内容1</li>
  <li>这是内容2</li>
  <li>这是内容3</li>
  <li>这是内容4</li>
</ol>
start
  • 决定从那个数字开始计数
html 复制代码
<h1>这是有序列表</h1>
<ol type="I" start="2">
  <li>这是内容1</li>
  <li>这是内容2</li>
  <li>这是内容3</li>
  <li>这是内容4</li>
</ol>

3.自定义列表

dl dt dd

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

10.表单标签

form

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

分为两个部分

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

1.属性

(1)action
html 复制代码
<form action="服务器地址"></form>
(2)input
文本框
html 复制代码
<input type="text" />
  • 单行输入

    html 复制代码
    <form action="">姓名<input type="text" /></form>
密码框
html 复制代码
<form action="">密码<input type="password" /></form>
单选框
  • 单选

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

    html 复制代码
    <form action="">性别<input type="radio" />男 <input type="radio" />女</form>

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

    html 复制代码
    <form action="">
      性别<input type="radio" name="gender" />男
      <input type="radio" name="gender" />女
    </form>

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

    html 复制代码
    <form action="">
      性别<input type="radio" name="gender" checked="checked" />男
      <input type="radio" name="gender" />女
    </form>
复选框
  • 多选

    html 复制代码
    <form action="">
      爱好<input type="checkbox" />吃饭 <input type="checkbox" />睡觉
      <input type="checkbox" />玩游戏
    </form>
普通按钮
html 复制代码
<form action="">
  <input type="button" value="这是一个普通按钮" />
</form>
  • 应用

    点击后弹出 hello

    html 复制代码
    <input type="button" value="这是一个普通按钮" onclick="alert('hello')" />
提交按钮

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

html 复制代码
<form action="">
  <input type="submit" />
</form>
  • 目标网址为百度一下

    html 复制代码
    <form action="http://www.baidu.com">
      用户名<input type="text" name="user" />
      <br />
      密码<input type="password" />
      <br />
      <input type="submit" />
    </form>
  • 重置按钮 reset

    html 复制代码
    <form action="http://www.baidu.com">
      用户名<input type="text" name="user" />
      <br />
      <input type="submit" />
      <input type="reset" /><!--重置按钮-->
    </form>
选择文件(提交文件)
html 复制代码
<form action="http://www.baidu.com">
  <input type="file" />
</form>
(3)label

通常与 input 搭配使用

html 复制代码
<label for="存放关联的id">文本</label>

例如:

html 复制代码
<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 表示默认选择那个选项
html 复制代码
<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:高

    html 复制代码
    <textarea name="" rows="30" cols="10"></textarea>

11.无语义标签 div&span

  • div 标签,divsion 的缩写,含义是 分割

  • span 标签 含义是 跨度

  • div 是独占一行,是一个大盒子

  • span 是不独占一行,是一个小盒子

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

12.HTML 特殊字符

空格: &nbsp;

小于号:&lt;

大于号:&gt;

按位与:&amp;

相关推荐
吕彬-前端12 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱14 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai24 分钟前
uniapp
前端·javascript·vue.js·uni-app
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205872 小时前
web端手机录音
前端
齐 飞2 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb