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

13 阅读 0 评论 0 点赞

在这里插入图片描述

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 特殊字符

空格： ` `

小于号：`<`

大于号：`>`

按位与：`&`

在这里插入图片描述

本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！

转载请注明出处：免费源码网-免费的源码资源网站 » html基础语法看这一篇就够了！

点赞(0) 打赏

本文分类：文章资讯
本文标签：html基础语法看这一篇就够了！
浏览次数：13 次浏览
本文链接：https://freeymw.com/article/26446.html

上一篇 > Kafka原理剖析之「Topic创建」
下一篇 > MacBook真的不能打游戏吗？Mac打游戏会损坏电脑吗？苹果电脑怎么玩游戏

评论列表共有 0 条评论

暂无评论

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

HTML

一 概念

二 DOM 树：

1.第一个程序

三 快速生成代码框架

四 html 的标签

1.注释标签

2.标题标签 h1-h6

3.段落标签

4.换行标签

5.格式化标签

(1)加粗标签

(2)倾斜标签

(3)删除线标签

(4)下划线标签

6.图像标签

1.img 标签

(1)相对路径

(2)绝对路径

2.src 属性

(1)alt 属性

(2)title 属性

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

(4)border 属性 边框

7.a 标签

1. href

2. target

8.表格标签

9.列表标签

1.无序列表

(1).属性

type

2.有序列表

(1).属性

type

start

3.自定义列表

10.表单标签

1.属性

(1)action

(2)input

文本框

密码框

单选框

复选框

普通按钮

提交按钮

选择文件(提交文件)

(3)label

(4)select

(5)textarea

11.无语义标签 div&span

12.HTML 特殊字符

空格： &nbsp;

小于号：&lt;

大于号：&gt;

按位与：&amp;

评论列表 共有 0 条评论

发表评论 取消回复

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

一概念

三快速生成代码框架

(4)border 属性边框

空格： ` `

小于号：`<`

大于号：`>`

按位与：`&`

评论列表共有 0 条评论

发表评论取消回复