html基础标签下

1.1 单标签

◆注释标签   ctrl+/

◆水平线标签   <hr>

◆换行标签   <br>

1.2 双标签

◆段落标签    <p></p>

◆h1-h6  值只能取到6   h1在页面中只能出现一次。

◆文本标签  <font></font>

◆图片标签

<img src=”图片的来源”  alt=”替换文本” title=”提示文本”   width=”宽” height=”高”>

◆  <strong></strong>  <b></b>

<em></em>   <i></i>

<ins></ins>   <u></u>

<del></del>    <s></s>

<sup>上标</sup>   <sub>下标</sub>

1.3 路径

◆相对路径

★文件和图片(html)在同一文件夹(目录)时,直接写文件名
      ★图片在上一级目录,..+/+文件名

★图片在下一级目录,文件夹名+/+文件名

◆绝对路径

1.4 超链接

<a href=”http://www.qianhtj.com”  title=”天玑金服”  target=”_self  |   _blank”>链接文本</a>

◆锚链接

◆空链    <a href=”#”>

◆链接优化写法    <base target=”_blank”>

1.5 特殊字符

空格

<    <

>    >

?

1.6 列表

无序列表

<ul>

<li></li>

<li></li>

<li></li>

</ul>

有序列表

<ol>

<li></li>

<li></li>

<li></li>

</ol>

自定义列表

<dl>

<dt></dt>

<dd></dd>

<dd></dd>

</dl>

2 新知识

2.1 !+tab   html5的标签结构

2.2  

Charset   编码

Ascll

Ansi

Unicode

Gbk

Gb2312

Big5

Utf-8   通用字符集

2.3 关键字

2.4 网页描述

2.5 网页重定向

2.6 链接外部样式表

2.7 设置icon图标

3 表格

展示数据。 是对网页重构的一个有益补充。

<table>    表格

<tr>       行

<td></td> 列

<td></td>

<td></td>

</tr>

</table>

◆属性:

Border=”1”   边框

Width=”500”  宽度

Height=”300” 高

cellspacing=”2”    单元格与单元格的距离

cellpadding=”2”    内容距边框的距离

align=”left  |  right  |  center”

如果直接给表格用align=”center”  表格居中

如果给tr或者td使用   ,tr或者td内容居中。

bgcolor=”red”    背景颜色。

3.1 表格的标准结构

<table>

<thead>

<tr>

<td></td>

<td></td>

</tr>

</thead>

<tbody>

<tr>

<td></td>

<td></td>

</tr>

</tbody>

<tfoot>

<tr>

<td></td>

<td></td>

</tr>

</tfoot>

</table>

3.2 表头和单元格合并

◆  表头  <caption></caption>

colspan=”2”  合并同一行上的单元格

rowspan=”2”  合并同一列上的单元格

3.3 表格标题、边框颜色、内容垂直对齐

◆表格标题 <th></th>用法和td一样

标题的文字自动加粗水平居中对齐

◆边框颜色

◆内容垂直对齐方式

Valign=”top   |  middle   |  bottom”

4 表单

表单的作用是收集信息。

表单的组成

◆提示信息

◆表单控件

◆表单域

属性:action:处理信息

Method=”get | post”

Get通过地址栏提供(传输)信息,安全性差。

Post 通过1.php来处理信息,安全性高。

◆文本输入框

maxlength="6"    限制输入字符长度

readonly=”readonly”  将输入框设置为只读状态(不能编辑)

disabled="disabled"  输入框未激活状态

name="username"   输入框的名称

value="大前端"     将输入框的内容传给处理文件

◆密码输入框

★注意:文本输入框的所有属性对密码输入框都有效。

◆单选框

★只有将name的值设置相同的时候,才能实现单选效果。

★checked=”checked” 设置默认选择项。

◆下拉列表

<select>

<option>下拉列表选项</option>

<option>下拉列表选项</option>

</select>

属性:

Multiple=”multiple”  将下拉列表设置为多选项

Selected=”selected”  设置默认选中项目

<optgroup></optgroup>   对下拉列表进行分组。

Label=””  分组名称。

◆多选框

Checked=”checked” 设置默认选中项

◆多行文本框

Cols  控制输入字符的长度。

Rows  控制输入的行数

◆ 文件上传控件

◆文件提交按钮

★:可以实现信息提交功能

◆普通按钮

★不能提交信息,配合JS使用。

◆图片按钮

★图片按钮可实现信息提交功能

◆重置按钮

★将信息重置到默认状态

◆表单信息分组

<fieldset></fieldset>    对表单信息分组

<legend></legend>      表单信息分组名称
html5补充表单控件

5 标签语义化

好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。

标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)

-标签语义化意义:

1:网页结构合理

2:有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语                         义你的网页内容自然容易被搜索引擎抓取;

3:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)

4:便于团队开发和维护

1:尽可能少的使用无语义的标签div和span;

2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;

3:不要使用纯样式标签,如:b、font、u等,改用css设置。

4:需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);

时间: 2024-12-24 11:00:41

html基础标签下的相关文章

前端基础:HTML标签(下)

前端基础HTML标签(下) 1.表单 表单的功能主要用于向服务器传输数据,从而实现客户端与Web服务器的交互.表单能够包含input系列标签,比如:文本字段.复选框.单选按钮.提交按钮等:表单还包含textarea.select和label标签: 表单的属性:action,将表单数据提交到指定服务器的某个程序,程序收到表单提交过来的数据(即表单数据)做相应处理,比如:https://baidu.com:**method**,表单的提交方式get/post/update等,默认为get: 注意 f

java的基础标签

跨行业进入IT,感觉就像学习一门外语,基础标签就像英语中的单词是的,现在只会一个个单词,不会说话的感觉,痛苦呀. 1.文本格式控制标签 <font color="文本颜色" size="字体大小" face="什么字体">文本内容</font> <b></b>   字体加粗 <i></i>     字体倾斜  <em></em>强调,语气加强用 <

HTML基础标签入门

HTML基础标签 昨天学习了一些HTML的基本标签以及基本属性: HTML是一种超文本标记语言,其中PHP是世界上最好的语言(增加学习的动力荣誉感). HTML文档里包含三部分: <html>--开始标签 <head> --网页上的控制信息 <title>--网页标题 </title> </head> <body> 网页显示的内容 </body> </html>--结束标签 <!--注释的内容-->

正式学习第一天下午——基础标签及其属性

今天下午学习了html中的基础标签及其属性.以下面的HTML代码为例. <!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"> <head>

HTML:基础标签及属性(备份)

基 本 标 签  创建一个HTML文档 <html></html> 设置文档标题以及其他不在WEB网页上显示的信息 <head></head> 设置文档的可见部分 <body></body> 标 题 标 签 将文档的题目放在标题栏中 <title></title> 文 档 整 体 属 性 设置背景颜色,使用名字或十六进制值 <body bgcolor=?> 设置文本文字颜色,使用名字或十六进制值 &

js实现标签下划线平移

一.使用js实现导航行栏,点击时,下划线会跟着鼠标的点击移动. html代码如下: <header>    <div id="nav1">     <div id="id1" class="item">1</div>     <div id="id2" class="item">2</div>     <div id="

基础标签

基础标签:        <html>开始标签       </html>结束标签       <head>头标签,主要放控制信息       <body>主题标签,主要放网页内容       <title>网页标题 网页结构:树状结构,有一个根(html标签) 通用标签及属性:    body的属性:           bgcolor        页面背景色            颜色表示方式 rgb(255,255,255)或#22FF3

亚博体育html 基础标签!

亚博体育yb9461学习html时该学习哪些基础标签!加粗:b(<b>内容</b>),strong(<strong>内容</strong>) 倾斜:i(<i>内容</i>),em(<em>内容</em>) 删除线:del(<del>内容</del>),s(<s>内容</s>) 下划线:u(<u>内容</u>),ins(<ins>

HTML入门-页面结构&amp;基础标签

文章目录 一.什么是html?二.动态网页与静态网页区别?(面试题)三.三个版本和一个标准(面试题)四.html5的扩展五.html创建文件(重点)六.html格式(重点)七.html基本结构(重点)八.注释九.基础标签(重点)十.文本标签十一.布局标签十二.特殊符号一.什么是html? html 超文本标记语言 文本:文字元素超文本:视频,图片,音乐,链接标记符:由左书名号和右书名号包裹一个标签名字的构造-----<p>语言:人与电脑交流的语言方式二.动态网页与静态网页区别?(面试题) 动态