HTML基础标签

最新推荐文章于 2024-06-27 20:35:09 发布

火星人～板哥

最新推荐文章于 2024-06-27 20:35:09 发布

阅读量145

点赞数 1

分类专栏： HTML 文章标签： HTML4

本文链接：https://blog.csdn.net/weixin_42200858/article/details/102588084

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主流浏览器及其内核

前端工程师与浏览器接触最多，所以应该了解主流浏览器及其内核：

主流浏览器	内核
谷歌（google chrome）	Webkit/Blink（2014）
safari	Webkit
火狐（firefox）	Gecko
IE	Trident
欧朋（opera）	Presto

基础标签

HTML超文本标记语言（英语：HyperText Markup Language，简称：HTML）

HTML基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta char set="UTF-8"/>    //指定字符集
		<title>开始学习</title>
	</head>
<body>
</body>
</html>

//<!DOCTYPE html>  声明为 HTML5 文档
//<html>      元素是 HTML 页面的根元素
//<head>     元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 
//           定义网页编码格式为 utf-8
//<title>    元素描述了文档的标题
//<body>     元素包含了可见的页面内容

HTML标签

--双标签：有开始和结束的<>  </>
--单标签：<.../>

H标签（标题）
网页的标题（Heading）是通过添加标题标签<*h>...</h>(1-6)
在企业开发中一个界面中只能有一个<h1>..</h1>标签

P标签（段落）
说明哪些文字是段落<p>....</p>，在浏览器中会是单独的一行

Hr标签(直线)
在浏览器上是一条直线，格式<hr/>斜杠在XHTML中必须有，在HTML可以没有

br标签（换行）单标签
br标签是换行标签，格式<br>，多个<br/>标签可以连续使用，企业开发中很少用br标签，br是不另外起一个段落换行，不改变其意思

[注意：][1] 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。<br/> 就是没有关闭标签的空元素（<br/> 标签定义换行）。

div标签（块元素）
<div>...</div>元素可以对标签进行更好的管理。

span标签（内联元素）
<span>...</span>元素是文本的容器，可以对文本进行更好的管理。

列表标签
1.有序列表：

<ol type="A" reversed="reversed" start="2">   
    <li></li>
    <li></li>
</ol>
#其中type排列顺序有：A, a, i, I, 1
#其中reversed是排列顺序:倒序。
#其中start是从哪个开始排序。

2.无序列表：

<ul type="disc">
    <li></li>
    <li></li>
</ul>
#其中只有这type类型一个属性有disc（实心圆）、square（方块）、circle（圆圈）

一般编程前对无序列表的预处理：

ul{
    list-style:none;
}
li{
    float:left;
}
#去除了ul中前面的圆圈，用list-style：none；
#让都横向给与它浮动；

img标签（图像）
HTML显示的图片是通过<img>标签

<img src="路径" width="宽度" height="高度"> 
--------------------------------------------
第一种：网页的url
第二种：本地路径
	1.通过相对路径赋值（掌握）
		相对路径就是每次都从.html文件所在的文件夹开始查找
		1.同级情况 
   格式：src="图片名.jpg"   
		2.下级：和.html文件存储的位置在同一个文件夹中
			格式：src="images/图片名.jpg"
		3.上级;存储文件的位置和代码在同一文件夹
			格式：src="../图片名.jpg"
	2.绝对路径查找（可以移值性不好）
		每次从指定的盘符开始查找，从电脑盘查找
  路径不要出现中文，容易出现问题，不能跨盘符
同时指定图片的高和宽可能变形，想不变形可以只指定其中的一个。
----------------------------------------------------------------
<img src="路径" width="宽度" alt="展示不出来时出现的内容" title="">
alt属性：图片占位符。是当图片加载不出来时，所显示的内容。
title属性：图片提示符

A标签（链接）
1.HTML超链接

<a href="链接的地址，如网址">显示的内容</a>
href中需要输入网址或者地址。
<a href="www.baidu.com" target="_self">
    <img>
</a>
- 链接的target属性
    使用target属性可以定义链接是在本页显示还是新建一个网页显示
    target="_blank"
		--当前网页跳转    _self
		--和新建网页跳转  _blank

2.锚点

id属性
<a id = "tips"> 目标文本 </a>
<a href = "#tips"> 访问目标文本 </a>
其中支持跨界面访问目标文本： <a href = "URL #tips"> 访问目标文本 </a>

3.打电话

例如外卖等中的电话号码
<a href="tel:15829675077">电话号码</a>

还可以发邮件：
<a href="mailto:2242570089@qq.com">发邮件</a>

4.协议限定符

<a href="javascript:while(1){alert("")}"></a>

form标签（表单元素）

<form method="get/post" action="发送的地址">
    <input type="text" name="username">                 文本域
    <input type="password" name="password">             密码字段
    <input type="submit">                               提交按钮
    <input type="radio" name="sex" value="boy">         单选按钮
    <input type="checkbox" name="fruits" value="apple"> 复选框
    <input type="submit" value="提交">
</form>
form表单可以发送数据   想要发送数据需要有：数据名和数据值
单选框：一道题的name应该一致。需要提交的话还需要value
多选框：也要规定是同一个name。需要提交的话还需要value
默认选中checked：      checked="checked"
用p标签可以使得语义性更好

下拉菜单：

<form action="" methood="get">
    <select name="province" id="">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="tianjin">天津</option>
    </select>
    <input type="submit" value="提交">
</form>

HTML标签的分类：
1.行级元素
内容决定元素所占位置，不可以通过CSS改变样式:{span, strong, em, a, del }
2.块状元素
独占一行，可以通过CSS改变样式:{div, p, ul, ol, form, address}
3.行级块元素
内容决定大小，可以改变宽高:{a}

以上就为HTML的常用标签，根据这些标签就可以写出一些简单网页的结构。