html标签整理

html标签整理

一、概念

超文本标记语言,是在标准通用化标记语言(SGML,Standard generalized markup language)基础上建立的。它是所有网页制作技术的核心和基础。

二、html基本结构
<!--文档声明:告诉浏览器以下文件用html哪个版本解析-->
<!DOCTYPE html> 

<!--告诉浏览器以下文件为超文本标记语言-->
<!--lang="en"告诉浏览器 这个网站是一个英文站,zh是中文站-->
<html lang="en"> 

<!--head是html文件的头部-->
<head> 

    <!-- meta 元信息-->
    <!-- charset="UTF-8" 网站的编码格式,utf-8 国际通用编码格式-->
    <meta charset="UTF-8">

<!--<title>网站的标题</title>-->
    <title>Title</title>
</head>
<!--head结束标签-->
<!--html主体内容-->

<body>
<!--只要显示页面的内容都放在body标签里-->
<!--所有的代码和符号都是英文状态下的-->
</body>
</html> 
三、常用标签
  • p(段落):分段 默认占父容器的100% align属性控制文本的对齐方式
  • hx(标题):一共有6个,h1h2h3h4h5h6。数字越大,字体越小
  • pre(预先格式化):变化字的大小,以预先设置号的格式输出
  • br(强制换行)

字符格式化标签

  • b(加粗)
  • i(斜体)
  • u(下划线)
  • sub(下标)
  • sup(上标)

列表标签

  • ol(有序列表)
<ol>
    <li>黄瓜</li>
    <li>葱</li>
    <li>青椒</li>
</ol>
  • ul(无序列表)
<ul>
    <li>文具</li>
    <li>书</li>
</ul>
  • hr(水平线)
  • font(字体):size大小1到7
<font size="6" color="red" face="楷体">最美的网站</font>
  • img(图像)
<img src="img/demo2.jpg" alt="网速不行" title="最美桃花">

特殊字符:(&______;)

  • &copy;----copy
  • &gt;----gt
  • &lt;----lt
  • &nbsp;----nbsp

超链接与锚标记

  • a(超链接):跳转页面
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="../714/child/txt.html">本地</a>
  • a(锚标记):
<a href="#c_m">衣服</a>
.
.
.
.
.
<a name="c_m">在这里买衣服</a>

表单元素对象

  • form(表单):可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据
<form   method="传送方式"   action="服务器文件">
  • input(输入框):当用户要在表单中键入字母、数字等内容时,就会用到文本输入框
<form>
   <input type="text/password" name="名称" value="文本" />
</form>
  • textarea(文本域):当用户需要在表单中输入大段文字时,需要用到文本输入域
<textarea  rows="行数" cols="列数">文本</textarea>
  • radio/checkbox(单选框/复选框):使用单选框、复选框,让用户选择
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
  • option(下拉列表):下拉列表框,设置selected=”selected”属性,则该选项就被默认选中
<select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
</select>
  • multiple:下拉列表也可以进行多选操作,在标签中设置multiple=”multiple”属性,就可以实现多选功能
 <select multiple="multiple">
  • submit(提交):使用提交按钮,提交数据
<input   type="submit"   value="提交">
  • reset(重置):重置按钮,重置表单信息
<input type="reset" value="重置">
  • label:为鼠标用户改进了可用性。当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。<label for=”name名称”>标签的 for 属性中的值应当与相关控件的 name 属性值一定要相同
<label for="控件name名称">

表格

  • table(表格):<table></tabble>:整个表格以table标记开始、/table标记结束
  • tbody:<tbody></tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上tbody标签后,这个表格就要等表格内容全部下载完才会显示
  • tr(行 ):<tr></tr>:表格的一行,所以有几对tr表格就有几行。
  • td(列):<td></td>:表格的一个单元格,一行中包含几对<td></td>,说明一行中就有几列
  • th(表头):<th></th>:表格的头部的一个单元格,表格表头。表头,也就是th标签中的文本默认为粗体并且居中显示
  • caption(标题):添加标题和摘要,标题用以描述表格内容,标题的显示位置:表格上方。摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容
  • cellspacing:列的外间距(属性)
<table bgcolor="green" border="1" cellspacing="0" width="300" cellpadding="20">
    <caption>学生成绩表</caption>
    <tr bgcolor="red" align="center">
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
        <td bgcolor="yellow" align="center">8</td>
        <td>9</td>
        <td>10</td>
    </tr>
    <tr>
        <th>11</th>
        <th>12</th>
        <th>13</th>
        <th>14</th>
        <th>15</th>
    </tr>
</table>
  • iframe(框架)
<a href="index.html" target="tardata">首页</a>
###### ###### <a href="form.html" target="tardata">page1</a>
<a href="714下午.html" target="tardata">page2</a>
<iframe src="index.html" name="tardata"></iframe>

style(样式)

  • 样式的写法
  1. 行内样式的写法
  2. 内嵌样式的写法
  3. 外部样式的写法
  4. 样式的优先级问题

样式优先级:就近原则(行内优先)。如果行内样式和内嵌样式和外部样式没有冲突,则叠加使用;如果冲突考虑样式的优先级:++行内>内嵌>外部++

  • 元素选择器(元素):使用元素选择器进行元素的查找
  • class选择器(.class):多次利用
  • id选择器(#id):唯一性
1. 行内样式的写法

给标签添加style属性;双引号里面去写样式属性;属性:值。

<div style="border: 1px solid rgb(124, 255, 106);width: 500px;height: 200px;">div是块级元素</div>
2.内嵌样式
<style>
    div{
        border:1px solid red;
        height: 200px;
        width: 1000px;
    }
        
    .block{
        border: 1px solid red;
        width: 300px;
        height: 100px;
    }
        
    #b_1{
        border: 1px solid red;
        width: 500px;
        height: 200px;
    }
</style>

3. 外部样式

和内嵌样式的写法一样,引入文件的方式有两种

  1. link:用属性href写入css文件路径引入
<link rel="stylesheet" href="css/index.css">

  1. import:不能用js操作
<style>
@import "css/index.css";
</style>
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值