html4.01

最新推荐文章于 2024-07-16 15:41:31 发布

qq_37118401

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量228

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_37118401/article/details/107943020

版权

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝网，淘，呸！</title>
</head>
<body>
	<p>我的第一个标题</p>
	
</body>
</html>

例子解释

<html> 与 </html> 之间的文本描述网页，根标签
<head></head>里面放的是思想，设置浏览器用的，是人看不到的
<body> 与 </body> 之间的文本是可见的页面内容
<meta charset = “utf-8”> 设置编码字符集
<title>淘宝网，淘</title>
<html lang="en">告诉搜索引擎爬虫，我们的网站是关于什么内容的 en 代表是英文，zh 是中文，德语是 de
<p> 与 </p> 之间的文本被显示为段落

HTML常用标签

<p></p>段落标签，让内容成段展示
标题标签，成段展示，独占一行，加粗字体，更改字体大小(从 1 到 6 依次减小)

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

<strong>加粗</strong> <em>斜体</em> 例又加粗又斜体，写成嵌套功能

 <strong> 
 <em>又加粗又斜体</em>
 </strong>

<del></del>这是一个中划线
<address></address>这是一个地址标签。可以用斜体+成段展示模拟
<div></div>独占一行,<span></span>不独占一行, div 和 span这两个标签是为了成块展示，规格化，这两个就是容器，功能如下：
功能1:分块明确，让整个页面更加结构化。
功能2:捆绑操作的作用；

<strong style="color: #f40">a</strong>
<em style="color: #f40">b</em>
<del style="color: #f40">c</del>

<div style="color: #f40">
	<strong>a</strong>
    <em>b</em>
    <del>c</del>
</div>

空格的含义是英文单词分隔符，不代表文本的空格，作为分隔符，打多少个都只显示一个空格;回车也是文字分割符，也是打多少个都只显示一个空格

`<div style="width: 100px;height: 100px;background-color: red;">qwertyuiopasdfghjklzxcvbnmbdfghjkj</div>`

在这里插入图片描述

<div style="width: 100px;height: 100px;background-color: red;">this is a test hahha balala </div>

在这里插入图片描述

html 编码格式是&;常用就以下三个

1) 空格文本，写多少个就空几格&nbsp;
2)<左尖角号，小于的意思，less than，html 编码是&lt;
3)>右尖角号，大于的意思，great than，html 编码是&gt;

<br>换行符
大部分标签的作用是把他包裹的文本作用域设置成他设置的样子，所以成对出现，有的标签自己就代表功能，就是单标签
<hr>水平线
有序列表喜欢的电影

<ol>
<li>marvel</li>
<li>速 8</li> 
<li>返老孩童</li>   
<li>了不起的盖茨比</li> 
</ol>

在这里插入图片描述
如果写成:<ol type = “1”>
此处的 type 值只有五个:数字，大写英文 A，小写英文 b，罗马数字大写 I，罗马数字小写 i
A 可以 27 进制
写成<ol type = “1” reversed = “reversed”> 就是倒序
如果想从第 2 个开始排序，就写<ol type = “1” start = “2”>
如果想从第 117 个开始排序，就写<ol type = “i” start = “117”> 想从第几个开始拍，start 里面写数字几

无序列表 ul，unorder list 只有 type = “”这一个属性可以改

<ul type = “disc”>
<li>草莓</li>
<li>苹果</li>
<li>橙子</li>
</ul>

如 type = “disc” 意思是 discircle，实心圆
如 type = “square” 意思是 square，实心方块
如 type = “circle” 意思是 circle，圈(空心圆)
ul 和 li 是一个很好的天生父子结构(柜子与抽屉)，可以做导航栏,可维护性好

<ul>
    <li><a href="#">宝贝</a></li>
    <li><a href="#">天猫</a></li>
	<li><a href="#">店铺</a></li>
</ul>

*{
			padding: 0;
			margin: 0;
			font-family: arial;
			color: #3C3C3C;

		}
		.main_plat_content_top_center_content_sort > ul{
			list-style: none;
		}
		.main_plat_content_top_center_content_sort > ul >li {
			display: inline-block;

		}
		.main_plat_content_top_center_content_sort > ul >li > a{
			display: inline-block;
			color: #f40;
			font-size: 12px;
			line-height: 20px;
			margin-left: 10px;
		}
		a{
			text-decoration: none;

			color: #3C3C3C;
		}
		a:hover{
			cursor: pointer;
			color: #f40;

        }

在这里插入图片描述

<img src = “sss.jpg style = “width:100px;”> src 是 source 的缩写，img 的地址分:
1)网上 url
2)本地的绝对路径
3)本地的相对路径
例<img scr = “fy.jpg” style = “width:200px;” alt = “这是啥” title = “This is a title”> 此处的 alt 是图片占位符。当地址出错时，图挂了，来展示这个信息;图片没问题，就不会展示这个信息，此处的 title 是图片提示符。当鼠标放上去，就会显示这个信息
<a href = “https://www.baidu.com”>www.taobao.com</a> 这个地址展示给用户是淘宝，实际给浏览器看的地址是百度
href 是 hyperText reference 超文本引用
<a>是 anchor --> 锚，定在某个点(置顶)
<a>标签的功能
1)超链接
2)锚点
3)打电话，发邮件
4)协议限定符
form 表单，能发送数据，非常重要<form></form> form method = “get/post”这是 form 发送数据的两种方式 action = “http://ssffg.php”这是发送给谁，就是 action 的位置 form 表单里面还需要配合 input 来写，input 里面需要 type

<input type = “text”>  //这是输入框的意思
<input type = “password”>  //这个是密码框的意思，默认是暗文
<input type = “submit”>  //这个是提交的组件
<input type = “submit” value = “login”>   //这样就改变了提交框的值 <input type = “radio”> //是单选框
<input type = “checkbox”> //是复选框

要注意语义化，所以用 p 标签更好，p 标签天生的功能就是换行

<form action="get" method="">
	<p>
		username: <input type="text">
	</p>
	<p>
		password: <input type="password">
	</p>
    <input type="submit">
</form>

 input{
        	border:1px solid #999;
        }

这种方式发送不了数据
发送数据要注重数据的主题(数据名)和数据的内容(数据值)，缺一不可，没有这个就发送不了数据
<input type = “text” name = “1234”> 此处 name 是数据名，1234 是数据值，此处 1234 可以随便填，最好填写接近意思的英文单词，方便使用
如：

<form action="get" method="">
	<p>
		username: <input type="text" name='username'>
	</p>
	<p>
		password: <input type="password" name="password">
	</p>
    <input type="submit">
</form>

在这里插入图片描述
?后面参数有值，就是发送成功的体现
另外，暗文是仅对自己不可见，受网安局监管的公司，一般用 md5，不可逆的加密方式
<input type = “radio” name = “star”>是单选框，此处的 name 里面的值一样的，是告诉浏览器你们是一道题，那么这个时候就没有填数据值的地方了，可以写个 value = “” 来储存数据值
你们最喜欢的男明星是：

<form method="get" action="">
	1.贝克汉姆 <input type="radio" name='star' value='qiegewala'>
	2.莱昂纳多 <input type="radio" name="star" value="agiao">
	3.阿龙 <input type="radio" name="star" value="laoba">
	<input type="submit">
	
</form>

复选框

<input type = “checkbox”>

默认选中
checked = “checked”
form 表单里面的组件 select，是一个下拉菜单，可以选值
在这种情况，数据名写在 select 里面更好，因为是天生的父子结构，而 option 标签中间填的内容就相当于了一个数据值。如果写成zjl点提交，那么后台会使用 jc 这个属性

<form method="get" action="">
	<h1>Province</h1>
	<select name="province">
		<option value="beijing">beijing</option>
		<option value="chongqing">chongqing</option>
		<option value="shanghai">shanghai</option>
	</select>
	<input type="submit">
</form>

浏览器
主流浏览器和内核，主流浏览器是有一定市场份额，并且有自己独立研发的内核浏览器分 shell+内核

主流浏览器（必须有独立内核）市场份额大于3%	内核
IE	trident
Firefox	Gecko
Google Chrome	Webkit/blink
Safari	Webkit
Opera	presto

qq_37118401

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html4.01

html和css什么是 HTML？HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如 <html>HTML 标签通常
复制链接

扫一扫