HTML标签笔记(初级)

1.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

   meta是html中的元标签,其中包含了对应html的相关信息,客户端浏览器或服务器端的程序会根据这些信息进行处理。
HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。
content(内容类型):这个网页的格式是文本的,网页模式
charset(编码):这个网页的编码是utf-8,中文编码,需要注意的是这个是网页内容的编码,而不是文件本身的,其他类型的编码中文可能会出现乱码

2.<head></head>

文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

3.title>和</title> 

在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。

4.注释

<!--注释文字 -->

5.段落

<p> 段落内容</p>

6.标题

<hx></hx>

标题标签一共有6个h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

7.强调

<strong>文本 </strong>加粗

<b>文本</b>加粗

<i>   </i>斜体

<em>  </em>斜体

<em><strong>标签是为了强调一段话中的关键字时使用,它们的语义是强调

8.为文字设置单独的样式

  <span>标签是没有语义的,用法如下

  
(1)
<style>
span{ 
   color:blue; //字体颜色设置为蓝色
}
</style>
<body> 
    <p>
        <span>梦想</span>
    </p>
</body>

(2)
<span style="css样式">……</span>
//例如:
<span style="background:red">梦想</span>
<span style="background:#f0f000">梦想</span>
View Code

9.引用

<q> 引用文本</q>      ( 浏览器会对q标签自动添加双引号)

<blockquote>引用长文本</blockquote>  (浏览器对<blockquote>标签的解析是缩进样式,前后缩进,但不会加双引号)

10.回车换行

<br> 或<br/>

&nbsp  空格

11.特添加水平线

文本<hr>

或文本<hr/>

在文本下加水平线

12.加入地址信息

<address>联系人地址信息</address>   (文本会变成斜体)

13.加入代码

(1)单行代码:<code>代码语言</code> (需要加空格回车标签)

(2)多行代码:<pre>代码段</pre>  (展示计算机的源代码,不需要加回车空格标签)

14.添加新闻信息列表

<ul>

  <li>……</li>      (<li></li>必须放在同一行)

  <li>……</li> 

  <li>……</li>

</ul>

注:ul-li是没有前后顺序的信息列表,每项li前都自带一个圆点。

15.在网页中展示有前后顺序的信息列表 

(有序标签)

<ol>
<li>我的第一个列表</li>
<li>第二个列表</li>
</ol>

结果:每项<li>前都自带一个序号,序号默认从1开始,</ol>末尾后会自动空一行

16.div标签划分出独立的逻辑部分

<div id="版块名称“>

…文本内容…

</div>

结果:每行开始会缩进(id可选)

17.表格

table、tbody、tr(表格的一行)、th(表格头部的一个单元格)、td(每行对应的每一列)

为表格加边框:

18.链接

(1)普通链接

  <a href = "……" target = "_blank"> click here  </a>

注:herf 后加URL或是本地文件地址,  target = "_blank"表示在新的页面打开链接,target 可选

(2)链接email

  <a href = "mailto:email地址1  ? email地址2 & email地址3 & …… subject = 邮件主题  body = 邮件内容"> click here </a>

注:若是多个地址,第一个地址后面要加?第二个及以后的地址后加&,subject 后加邮箱主题, body后加邮件内容 。这三条内容在一对双引号内。

19.插入图片

<img src = "图片地址"  alt = "下载失败时的替换文本" title = "提示文本">  (单边标记)

20.与用户交互

(1)<form></form>
  <form method="传送方式" action="服务器文件">
  ……(内容)
  </form>

  注: Δ.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

   · Δ.method : 数据传送的方式(get/post)。

     所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上)

 (2)文本框/单选框/复选框/提交按钮/重置按钮

  <form>
     <input type="text/password/submit/reset" name="名称" value="文本(输入框默认值)" />
    ……
    <input type = "radio/checkbox" value = "name" name = "控件名" checked = "默认被选中的项(与value保持一致或写selected)"> 按钮名 (每个选项都要编写一行代码)
    <input type = "radio(单选)/checkbox(多选)" value = "name" name = "控件名" checked = "默认被选中的项"> 按钮名
    <input type = "radio(单选)/checkbox(多选)" value = "name" name = "控件名" checked = "默认被选中的项"> 按钮名
  </form>
  注:type有文本/密码/确定(提交)按钮/重置按钮/单选/多选。
    重置或提交按钮时,value的值是按钮上显示的文字。
    同一组单选框,name必须一样
(3)文本输入域
  <form>
    <textarea rows = "行数" cols = "列数">文本</textarea>
  </form>
  注:行数,列数用双引号括起来。cols ,rows 可用css中的weith ,height代替。
(4)下拉框
<form>
  <select multiple="multiple">
    <option value = "向服务器提交的值" selected="selected"> 选项</option>
    <option value = "向服务器提交的值" selected="selected"> 选项</option>
    ……
  </select>
</form>
 
 注: multiple="multiple"为可选项,表示多选。
(5)label
  如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)
  如下代码产生的效果:点击男会选中男字后面的单选控件
 <label for="male"></label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female"></label>
  <input type="radio" name="gender" id="female" />
  <br />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
  <br>
View Code

21.

猜你喜欢

转载自www.cnblogs.com/lyqf/p/10520370.html