html 知识汇总与补充

最新推荐文章于 2022-03-08 15:34:54 发布

maggie_xff

最新推荐文章于 2022-03-08 15:34:54 发布

阅读量349

点赞数

本文链接：https://blog.csdn.net/sinat_38589469/article/details/78695695

版权

一、html 基本布局

html: hyperText markup language 超文本标记语言

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

二、接下来，对之前不清楚的概念进行补充：

1. 编码格式

之前我只是单纯的知道敲代码时要在 head 标签内的 meta 标签内加入 charset=utf-8 ，但其实我们并不清楚为什么

gb2312 ：国家标准第2312条（只能识别简体中文）

gbk ：国家标准扩展版本

utf-8 ：万国码（所有国家都适用）

2. xml:lang="en"

作用：告诉搜索引擎爬虫此文档是关于英文的

3. 百度搜索时关键字的位置

<meta name="keywords" content="注册向导，滚动，表单，jquery" />

<meta name="description" content="演示XHTML、CSS、jquery、PHP案例和示例" />

4. 编程软件 h 标题 h1~h6 一次性输出

h$*6 结果如下：

<!-- h$*6 -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

h${标题}*6 结果如下：

<!-- h${标题}*6 -->
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

5. 简单样式标签

：加粗标签

：斜体标签

<del></del> ：割线标签

<address></address> ：地址标签

6. “ ” 空格为英文单词分隔符

7. html编码 $ ;

< 左括号的编码表示方法 :  $lt;
> 右括号的编码表示方法 :  $gt;

8. 单标签

<hr />

9. ol 在工作中基本不用

<!-- ol没什么用 -->
<ol type="1" start="2"><!-- 1/a/A/i/I  排序方式-->
	<li>句子</li>
	<li>句子</li>
	<li>句子</li>
	<li>句子</li>
	<li>句子</li>
	<li>句子</li>
</ol>

10. 各大网页基本都用 ul 分块

<!-- ul大用途 -->
<ul type="circle"><!-- disc:实心圆  circle:空心圆 square:实心方块 --> 
	<li>苹果</li>
	<li>句子</li>
	<li>举行</li>
</ul>

11. img 标签

alt:图片站位符
title：图片提示符

<img src="猫眼提供地址" alt="地址报错后展示的字" title="鼠标触摸时显示的字"/>

12. a 标签

功能：1.href: hyperText reference 超文本引用
2.anchor: 锚 #cd
3.打电话，发邮件

<a href="tel:18327852725" target="_blank">打电话</a>

<a href="mailto:1091314622@qq.com">发邮件</a>

4.协议限定符

<a href="javascript:"></a>

三、 form 表单（method : get / post）

<form action="发送地址" method="get">
<!-- 帐号，密码框样式 -->
<input type="text" name="username" style="color:#999" value="请输入用户名" 

οnfοcus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" 

οnblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}"/>

<input type="password" name="password"/>





<!-- 单选框：同一个name -->

1<input type="radio" name="star" value="1" checked="checked"/>

2<input type="radio" name="star" value="2"/>

3<input type="radio" name="star" value="3"/>







<!-- 复选框：同一个name -->

1<input type="checkbox" name="star" value="1" checked="checked"/>

2<input type="checkbox" name="star" value="2"/>

3<input type="checkbox" name="star" value="3"/> 





<!-- 下拉表单 -->
<select name="province" id="">

<option value="beijing">beijing</option>

<option value="shanghai">shanghai</option>

<option value="tianjin">tianjin</option>

</select>



<!-- 提交按钮 -->
<input type="submit"/>

</form>



四、 当今社会的主流浏览器

浏览器主要看两个方面：  shell  （Linux  开发，展示页面）  ，   内核  （相当重要） 。
所以大家应果断卸载360 。
   浏览器                          内核   
	IE                  trident
	Firefox             Gecko
	Google chrome       Webkit
	Safari              Webkit
	Opera                Presto