HTML基础语法

最新推荐文章于 2024-07-03 16:33:21 发布

QinYanan.

最新推荐文章于 2024-07-03 16:33:21 发布

阅读量2.8k

点赞数

分类专栏： H5 文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_46931860/article/details/121047015

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML语义化

一、基本标签

1、HTML结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>这是网页的标题</title>
</head>
<body>
    <p>这是网页的内容</p>
</body>
</html>

2、head标签

title meta link style script base

(1)title标签
定义网页的标题

(2)meta标签
一般定义页面的特殊信息，给搜索引擎看的
两个属性：name和http-equiv
name属性：

<meta  name="keywords" content="绿叶学习网,前端开发,后端开发" />
<!--网页描述-->
<meta  name="description" content="绿叶学习网是一个最富有活力的Web技术学习网站" />
<!--本页作者-->
<meta  name="author" content="helicopter" />
<!--版权声明-->
<meta  name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。" />

http-equiv属性：
定义编码

<meta charset="utf-8" />

定义网页自动刷新跳转

<meta  http-equiv="refresh" content="6;url=http://www.baidu.com"/>

(3)style标签

 <style type="text/css">
        /*这里写CSS样式*/
    </style>

(4)script标签

<script>
        /*这里写JavaScript代码*/
    </script>

(5)link标签

 <link type="text/css" rel="stylesheet" href="css/index.css">

(6)base标签
无意义直接忽略

3、body标签

4、HTML注释

<!--注释的内容-->

二、文本

1、简介

h p br strong/b i/em/cite sup sub s u big small hr div

2、总述

（1）标题标签
h1~h6 大到小，h1一般只能有一个

（2）段落标签

<p>段落标签</p>

<br/>

使用p标签会导致段落与段落之间有一定的间隙，而使用br标签则不会。
br标签是用来给文字换行的，而p标签是用来给文字分段的。如果你的内容是两段文字，
则不需要使用br标签换行那么麻烦，而是直接用两个p标签就可以了。

(3)文本标签
strong和b：加粗
一般用strong
i、em和cite：斜体
一般用em
sup:上标
(a+b)² a+b的平方
sub：下标
s：中划线
u：下划线
big：大号文字
small：小号文字

(4)水平线标签

<hr/>

(5)div标签
划分HTML结构

(6)自闭和标签
meta link br hr img input

(7)块元素和行内元素
常见块：h1~h6 p div hr ol ul
常见行内：strong em a span
块元素显示效果独占一行，排斥任何元素和他们位于同一行
行内元素可以排一列
块元素内部可以容纳其他块元素和行内元素
行内只能容行内

(8)特殊符号
空格的代码是 
其余的见表
一个汉字等于三个空格

三、列表

ol li ul li dl dt dd

(1)有序列表

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

type属性值用来改变顺序是按照数字还是字母等的排列
1 a A i I

(2)无序列表

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

属性值：disc（实心圆默认） circle(空心圆) square(正方形)
文本不能放在ul内

(3)定义列表

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

 <dl>
        <dt>HTML</dt>
        <dd>制作网页的标准语言，控制网页的结构</dd>
        <dt>CSS</dt>
        <dd>层叠样式表，控制网页的样式</dd>
        <dt>JavaScript</dt>
        <dd>脚本语言，控制网页的行为</dd>
    </dl>

四、表格

table表格 tr行 td单元格 caption表格标题 th表头单元格 thead tbody tfoot 表头表身
表尾 rowspan colspan

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>表行单元格1</td>
            <td>表行单元格2</td>
        </tr>
        <tr>
            <td>表行单元格3</td>
            <td>表行单元格4</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格5</td>
            <td>标准单元格6</td>
        </tr>
    </tfoot>
</table>

行并行和列

<td rowspan = "跨越的行数"></td>
<td colspan = "跨越的列数"></td>

去掉几个td

五、图片

1、简介

<img src="" alt="" title="" />

src:图片路径
alt：指定图片的提示文字，图片消失的时候提示
title：鼠标放在图片上提示

2、路径

图片路径
绝对路径：<img src="D:/website/img/haizei.png" />本地
相对路径：<img src="../img/haizei.png" />出某一层目录去找图片

3、图片格式

图片格式
位图：：jpg（或jpeg）、png、gif
矢量图：“.ai”、“.cdf”、“.fh”、“.swf”
…
jpg图片不支持透明，png图片支持透明，而gif图片可以做动画。
（1）位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片。
（2）位图组成单位是“像素”，而矢量图组成单位是“数学向量”。
（3）位图受分辨率影响，当图片放大时会失真；而矢量图不受分辨率影响，当图片放大时不会失真。
（4）网页中的图片绝大多数都是位图，而不是矢量图。

六、超链接

1、简介

<a href="链接地址" target="打开方式"></a>

target属性的取值
_self 自身
_blank 新窗口
_parent 父窗口
_top 顶层窗口

2、内部链接

内部链接
指向自身网页的页面
同一个根目录下的网页

3、锚点链接

设置a的href为#id名在对应地方设置id

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        <a href="#article">推荐文章</a><br />
        <a href="#music">推荐音乐</a><br />
        <a href="#movie">推荐电影</a><br />
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="article">
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="music">
        <h3>推荐音乐</h3>
        <ul>
            <li>林俊杰-被风吹过的夏天</li>
            <li>曲婉婷-在我的歌声里</li>
            <li>许嵩-灰色头像</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="movie">
        <h3>推荐电影</h3>
        <ul>
            <li>蜘蛛侠系列</li>
            <li>钢铁侠系统</li>
            <li>复仇者联盟</li>
        </ul>
    </div>
</body>
</html>

七、表单

form、input、textarea、select、option

1、form标签

<form  name="表单名" method="post、get" action="" target="">
    //各种表单标签
</form>

post安全性好 get较差
action指定表单数据提交到哪一个地址进行处理
target：窗口打开方式
enctype：设置编码方式，一般不用，文件上传用

2、input标签
单行文本框：<input type="text" />
密码文本框：<input type="password" />
value size maxlength
文本框的默认值长度最多输入的字符

单选框：

<input type="radio" name="组名" value="取值" />
<label><input type="radio" name="gender" value="男"  checked/>男</label>
<label><input type="radio" name="gender" value="女" />女</label>

为了更好地语义化，表单元素与后面的文本一般都需要借助label标签关联起来。
value为了服务器更好地操纵数据

复选框：

<input type="checkbox" name="组名" value="取值" />
  <form method="post">
        你喜欢的水果：<br/>
        <input type="checkbox" name="fruit" value="苹果" checked/>苹果
        <input type="checkbox" name="fruit" value="香蕉"/>香蕉
        <input type="checkbox" name="fruit" value="西瓜" checked/>西瓜
        <input type="checkbox" name="fruit" value="李子"/>李子
    </form>

普通按钮：<input type="button" value="取值" />

提交按钮：把数据提交给服务器

<input type="submit" value="取值" />

重置按钮：清楚用户在表单上输入的内容

<input type="reset" value="取值" />

<button></button>

文件上传：<input type="file" />

多行文本框：

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

3、下拉列表

<select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

select标签

 <form method="post">
        <select multiple size="5" >
            <option>HTML</option>
            <option>CSS</option>
            <option>jQuery</option>
            <option>JavaScript</option>
            <option>Vue.js</option>
            <option>HTML5</option>
            <option>CSS3</option>
        </select>
    </form>

size=“5” 下拉框可以显示五个内容，其余的有滑动
multiple：可多选
option标签

  <option selected>jQuery</option>

是否选中

  <option value="HTML">HTML</option>

八、框架

iframe

<iframe src="链接地址" width="数值" height="数值"></iframe>

内嵌框架
在当前页面再嵌入一个页面

QinYanan.

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
HTML基础语法

HTML语义化一、基本标签1、HTML结构<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>这是网页的标题</title></head><body> <p>这是网页的内容</p></body></html>2、head标签title meta l
复制链接

扫一扫