【无标题】html基本标签、语法

HTML5

 

背景

1.HTML是一系列网页技术的总称，包含了HTML+CSS+JavaScript。

2.HTML5是HTML的第五个版本。

3.超文本标记语言，由一套标记标签组成。

 

4.XHTML是可扩展文本标记语言。

5.网页的组成：结构（html xhtml，xml）、表现(css)、行为(js)。结构和表现用W3C标准，行为用ECMA标准。

6.一个项目组成：产品经理，UI，前端，后台，测试。

使用

vs code

扩展包

下载

结构快捷键

！+enter

html：5+enter

运行：右键-open in  default browser

注释：ctrl+/

单标签<>

如 meta br

双标签<> </>

如：body title html

属性

对标签起到一定加强的作用，跟标签之间用空格间隔

属性值

•     等号之后的叫属性值

 

其他快捷键

标签{$}*数字

•     自动生成数字个标签

 

•     也可以不加{$},其中$的个数代表数字位数

 

 常用标签

 换行

<br> 单标签

空格

&nbsp；一个space键空格大小

&emsp；一个中文大小空格

&ensp；半个中文大小空格

space

不可重复

可重复

标题

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

h1文章或重点标题

h2大模块

h3小模块

h1到h6逐级减小

双标签，独自占据一行，可以加粗字体，有一定的行高

段落

<p></p>

双标签，独自占据一行，有一定的行高

加粗

<b></b>

<strong></strong>

双标签，不能独自占据一行，可以加粗文本

倾斜

<i></i>

<em></em>

双标签，不能独自占据一行，可以倾斜文本

删除线

<del></del>

<s></s>

双标签，不能独自占据一行，可以在文本中间加一条删除线

上下标

上标

下标

双标签，不能独自占据一行，给文本加上下标

特殊符号

版权符号&copy；

商标符号&reg；

特殊符号只是浏览器内核在处理的过程中该有的特殊字符来处理，空格也是特殊符号

分割线

<hr>

width 设置分隔线的宽度【注意不能通过属性height设置高度】

color:设置分隔线的高度

单标签，独自占据一行，自动水平居中

超链接

<a href="想要跳转的链接" target="打开新网页的方式" title="鼠标悬停时显示的内容">

双标签，不能独自占据一行，有默认的颜色，文字下方有下划线

target="_self[默认在自身打开]/_blank[在新的界面打开]"

在head中用base标签进行统一设置，需要单独设置的地方单独设置，详细的代码参考如下：<base target=“_blank”>

ref属性值为空时，点击后刷新页面

关于超链接的延申之锚点定位

应用场景:参考京东最右侧部分

解决方案:<a href="#想要跳转地方的id值">描述内容</a>

图片

<img src="图片的路径">

路径

绝对路径

•     绝对路径:直接复制电脑的路径/使用图片的网址【绝对路径可以使用“\”或“/”字符作为目录的分隔字

 

相对路径

•     同级

 

•     接用图片的名称或者./图片的名称

 

•     下级

 

•     找到电脑路径下图片和html文件不同的部分，src的值为不同的部分

 

•     上级

 

•     ../往上一级查找，知道找到html文件和图片所在的文件夹在同一文件夹时，然后找到电脑路径下图片和html上级文件不同的部分，src的值为不同部分的值，不要忘记../（一个“../”就是一级,上两级就是“../../”）

 

属性

width:设置图片的宽度

height:设置图片的高度【一般不会同时设置图片的宽度和高度，容易让图片失帧】

title:设置鼠标悬停时显示的内容

alt:图片走丢之后的提示信息

border:图片的边框

图片超链接:<a href=""><img src=""></a>

居中

居中标签:<center></center>  可以让标签内的内容居中显示，独自占据一行

行内元素

语法:<span>描述内容</span>

结合css

块

语法:<div>描述性内容</div>

划分页面区域

列表

有序列表

<ol>

<li></li>

</ol>

属性

•     type，序号类型，可以是：1，A，a，i，I

 

•     start，开始值，数字

 

无序列表

<ul>

<li></li>

</ul>

type，表示列表前的图标，如none，

可以用来做列表或导航栏

自定义列表

<dl>

<dt>

<dd></dd>

</dt>

</dl>

dt只能有一个，dd可以有多个

表单

功能：用来收集用户信息

应用场景：登录注册搜索等

组成：包括表单域+表单控件(表单元素)+提示信息

语法

<form action="提交的路径" method="表单提交的方式">

•     表单域:说明表单的区域

 

请输入你的姓名:

•     提示信息

 

<input type="相对应的类型">

•     表单控件【表单元素】

 

</form>

表单属性之get和post

•     a. get是从服务器上获取数据，post是向服务器传送数据。

 

•     b. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

 

•     c. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

 

•     d. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB

 

•     e. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

 

控件

a.文本框:<input type="text">

b.密码框:<input type="password">

d.单选框

•     <input type="radio" name="属性值相等">单选项1

 

•     <input type="radio" name="属性值相等">单选项2

 

•     ...

 

•     补充：在使用单选框的时候注意后面name属性值必须相等，以此达到互斥的效果

 

e.复选框:

•     <input type="checkbox">复选项1

 

•     <input type="checkbox">复选项2

 

•     <input type="checkbox">复选项3

 

•     ...

 

c.按钮

•     普通按钮:<input type="button" value="按钮显示的内容">

 

•     提交按钮:<input type="submit">默认的value值为提交

 

•     重置按钮:<input type="reset">默认的value值为重置

 

•     图片按钮:<input type="image" src="显示的图片的路径">

 

•     知识点补充:后期大家在写代码的过程中还会经常遇到一种提交按钮书写方式:<button>按钮显示的内容</button>

 

f.下拉列表

•     <select>

 

•     <option></option>

 

•     ...

 

•     </select>

 

•     知识点补充:

 

•     <optgroup></optgroup> 对于option的内容进行分组

 

•     应用:

 

•     <select>

 

•     <optgroup lable="相对应的值">

 

•     <option></option>

 

•     ...

 

•     </optgroup>

 

•     </select>

 

g.文本域

•     <textarea cols="一行中的字节数" rows="可以显示出来的行数"></textarea>

 

label

•     <label for="对应点击之后想要让他获取焦点的id属性值">点击的内容</label>

 

属性

placeholder:提示性信息

•     使用时，标签内不能有任何内容

 

value:默认值（初始值）

name属性:提交时可以把表单中的内容传递给服务器

checked:默认选中【经常使用在单选框和复选框中】

disabled:禁用表单

表格

语法:

<table>

<tr>

<td>描述内容1</td>

<td>描述内容2</td>

<td>描述内容3</td>

...

</tr>

<tr>

<td>描述内容1</td>

<td>描述内容2</td>

<td>描述内容3</td>

...

</tr>

...

</table>

如果tr table rows的缩写，代表表格的行；td代表表格的单元格，如果没有特殊情况注意所有的tr里面td个数应该一致

属性

table

•     border 给table加边框

 

•     cellspacing 去除边框与边框之间的间距【存在默认的间距】

 

•     cellpadding 内容与边框之间的距离

 

•     width/height 宽度/高度

 

•     bordercolor 颜色

 

•     align 设置表格的位置【left/right/center】

 

•     bgcolor 设置表格的背景颜色

 

tr

•     height 高度

 

•     align 设置一行中文字的位置

 

•     bgcolor 设置背景颜色

 

td

•     width/height 宽度/高度

 

•     align 设置单个单元格文本的位置

 

•     bgcolor 设置背景颜色

 

•     colspan 跨列成行

 

•     rowspan 跨行成列

 

<caption></caption>表格的标题

 <th></th>加粗居中的单元格