我的前端笔记_HTML

最新推荐文章于 2024-09-13 10:46:15 发布

2401_83579254

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量944

点赞数 31

文章标签：前端笔记 html

本文链接：https://blog.csdn.net/2401_83579254/article/details/140759417

版权

我的前端入门笔记_HTML

一.HTML标签

1.HTML基本结构标签

" ! "可直接给出提示框

<html>
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        我爱中国
    </body>
</html>

在这里插入图片描述

2.HTML常用标签

标签	用途
`<!DOCTYPE html>`	文档类型声明标签
`<html lang="en">(英文),<html lang="zh-CN">`(中文)	设置语言
`<meta charset="UTF-8">`(万国码,一般情况下统一使用该码)	规定字符编码,没写这句话可能会乱码
`<h1>-<h6>`	标题标签
`<p>内容</p>`	段落标签
`<br/>`	换行标签,是个单标签
`<strong></strong>,<b></b>`	加粗
`<em></em>,<i></i>`	倾斜
`<del></del>,<s></s>`	删除线
`<ins></ins>,<u></u>`	下划线
`<div>内容</div>`	大盒子,一行只能一个
`<span>内容</span>`	小盒子,一行可多个
`<img src="img.jpg" alt="图像无法加载" title ="提示" width="500" height="100" bolder="15"/>`(注意区分alt和title)	总体为图像标签.`img`图像标签名;`src`属性,用于指定图像文件路径和文件名,必须要写;`alt`替换文本,图像不能时显示该文字;`title`提示文本,鼠标放在图片上会出现的文本;`width`宽度,`height`高度,一般只修改一个;`bolder`设置图像边框粗细
`<a href="跳转对象" target="目标窗口弹出方式">文本或图像</a>`	总体为超链接标签.a为超链接标签名.href用于指定链接目标的url地址,必须要写,该属性可让标签具有超链接功能;target用于指定链接页面的打开方式,其中`_self`为默认值,`_blank`为在新窗口打开方式
`<!--这是注释-->`	注释标签,也可用快捷键ctrl+/
特殊字符对应的代码	详见下.` `空格;`<`小于号;`>`大于号
表格标签	详见下.`<table></table>`是用于定义表格的标签;`<tr></tr>`标签用于定义表格中的行;`<td></td>`(table data,指表格内容)用于定义表格中的单元格;`<th></th>`表头单元格标签,一般加粗居中显示
列表标签	详见下.`<ul></ul>`定义无序列表,使用`<li></li>`定义列表项;`<ol></ol>`定义有序列表,使用`<li></li>`定义列表项;`<dl></dl>`定义描述列表(或定义列表),与`<dt>`(定义项目/名字)和`<dd>`(描述每一个项目/名字)一起使用
表单标签	详见下.`<form>`标签用于定义表单域;

1.路径(相对路径/绝对路径)

目录分为相对路径和绝对路径

相对路径分类	符号	例
同一级路径		`<img src="img.jpg" />`
下一级路径	/	`<img src="nextWenjianjia/img.jpg" />`
上一级路径	…/	`<img src="../img.jpg" />`

绝对路径很少使用,因为每个用户的文件位置不同.

绝对路径通常是从盘符开始的路径或完整的网络地址.例如:

D:\Desktop\网页
https://hao.360.com

2.链接分类

外部链接.
例:<a href="http://www.baidu.com">百度</a>
内部链接.
例:<a href="第一个网页.html">我的第一个网页</a>
空链接.用于当时没有确定链接目标.
例:<a href="#">空链接</a>
下载链接.如果href里的地址是一个文件/.exe/zip等压缩包形式时,会下载这个文件.
例:<a href="img.zip">下载链接</a>
网页元素链接.在网页中的各种网页元素,如文本/图像/表格/音频/视频等都可以添加超链接.
例:<a href="第一个网页.html"><img src="img.jpg" /></a>
锚点链接.可快速定位到页面中的某个位置.锚点链接的创建分两步
1.在链接href属性中,设置属性值为 #名字的形式.如:<a href="#two">第二集</a>
2.找到目标位置标签,里面添加一个id属性=刚才的名字,如:<h3 id="two">

3.特殊字符

注意加分号!

特殊字	描述	字符的代码
	空格符	` `
<	小于号	`<`(less than)
>	大于号	`>`(greater than)
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
x	乘号	`×`
÷	除号	`÷`
²	平方2(上标2)	`²`
³	平方3(上标3)	`³`

4.表格标签

表格是用来显示数据的,它可以让数据显示非常规整,可读性非常好

1.表格基本语法

<table>
    <tr>
        <th>表头单元格</th>
        <td>单元格内的文字</td>
    ...
    </tr>
    ...
</table>

2.表格属性

属性名	属性值	描述
align	left,center,right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框,默认值为"",表示没有边框
cellpadding	像素值	规定单元格边沿与其内容之间的空白,默认1像素
cellspacing	像素值	规定单元格之间的空白,默认2像素
width/height	像素值或百分比	规定表格的宽度/高度

align是相对网页的对齐方式,并不是内部文字的对齐方式
cellpadding表示单元格内部文字和单元格边框之间的距离
cellspacing表示单元格和单元格之间的距离

3.表格结构标签

用途:规范代码,看起来更方便
<thead>标签表格的头部区域,<tbody>标签表格的主体区域.这样可以更好的分清表格结构,点击"-"可以折叠起来

4.合并单元格

(1)合并单元格方式:

跨行合并:rowspan=“合并单元格的个数”.如:<td colspan="2"></td>
跨列合并:colspan=“合并单元格的个数”

在这里插入图片描述

(2)目标单元格:

跨行:最上侧单元格为目标单元格,写合并代码
跨列:最左侧单元格为目标单元格,写合并代码

合并完毕后记得删除多余单元格

5.列表标签

列表是用来布局的,最大特点是整齐/整洁/有序,分为无序列表,有序列表和自定义列表

标签名	定义	说明
`<ul></ul>`	无序标签	只能嵌套`<li></li>`,没有顺序,使用较多.`<li></li>`相当于一个容器,可以容纳所有元素.带有自己的样式属性(小点),在实际使用时使用CSS来设置
`<ol></ol>`	有序标签	只能嵌套`<li></li>`,有顺序,使用相对较少.`<li></li>`相当于一个容器,可以容纳所有元素.带有自己的样式属性(标号),在实际使用时使用CSS来设置
`<dl></dl>`	自定义列表	只能包含`<dt>`和`<dd>`.`<dt>`和`<dd>`里可以放任何标签.`<dt>`和`<dd>`个数没有限制,经常是一个`<dt>`对应多个`<dd>`

1.无序列表(重点)

无序列表基本语法

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    ...
</ul>

2.有序列表(理解)

有序列表基本语法

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    ...
</ol>

3.自定义列表

自定义列表的使用场景:常用于对属于或名词进行解释和描述,定义列表的列表项前没有任何项目符号(一个大哥和几个小弟的故事)

在这里插入图片描述

自定义列表基本语法

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

6.表单标签

使用表单的目的是为了收集用户信息,一个完整的表单通常由表单域,表单控件(也称为表单元素)和提示信息3部分构成

在这里插入图片描述

1.表单域

表单域是一个包含表单元素的区域.<form>用于定义表单域,会把它范围内的表单元素提交给服务器

<form actio="url地址" method="提交方式" name="表单域名称">
    各种表单组件
</form>

常用属性

属性	属性值	作用
action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式
name	名称	用于指定表单的名称,以区分同一个页面中的多个表单元素

2.表单控件(表单元素)

(1)input输入表单元素

<input>标签用于收集用户信息,是单标签,包含一个type属性值,type属性值不同可用来指定不同的控件类型

<input type="属性值"/>

type可取属性值

属性值	描述
button	定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)
checkbox	定义复选框
file	定义输入字段和"浏览"按钮,供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段,该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮
submit	定义提交按钮
text	定义单行的输入字段,用户可在其输入文本.默认宽度为20个字符

除type属性外,<input>标签还有其他属性

属性	属性值	描述
name	用户自定义	定义input元素的名称
value	用户自定义	规定input元素的值
checked	checked	规定input元素首次加载应当被选中
maxlength	正整数	规定输入字段的字符的最大长度,较少使用

在这里插入图片描述

补.`<label>`标签

<label>标签为input元素定义标注(标签),用于绑定一个表单元素,当点击<label>标签内文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增强用户体验

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

<label>的for属性应该与相关元素的id属性相同

(2)select下拉表单元素

<select>
    <option>选项1</option>
    <option>选项2</option>
    ...
</select>

(3)textarea文本域元素

使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时可用<textarea>标签,在表单元素中,它是用于定义多行文本输入的控件,常见于留言板,评论

<textarea rows="3",cols="20">
	文本内容
</textarea>

cols=“每行中的字符数”,rows=“显示的行数”,我们在实际开发中不会用到,都是用CSS来改变大小

<option>选项2</option>
...

```

(3)textarea文本域元素

<textarea rows="3",cols="20">
	文本内容
</textarea>

cols=“每行中的字符数”,rows=“显示的行数”,我们在实际开发中不会用到,都是用CSS来改变大小

2401_83579254

关注

31
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

特殊字	描述	字符的代码
	空格符	` `
<	小于号	`<`(less than)
>	大于号	`>`(greater than)
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
x	乘号	`×`
÷	除号	`÷`
²	平方2(上标2)	`²`
³	平方3(上标3)	`³`

特殊字	描述	字符的代码
	空格符	` `
<	小于号	`<`(less than)
>	大于号	`>`(greater than)
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
x	乘号	`×`
÷	除号	`÷`
²	平方2(上标2)	`²`
³	平方3(上标3)	`³`

我的前端笔记_HTML

我的前端入门笔记_HTML

文章目录

一.HTML标签

1.HTML基本结构标签

2.HTML常用标签

1.路径(相对路径/绝对路径)

2.链接分类

3.特殊字符

4.表格标签

1.表格基本语法

2.表格属性

3.表格结构标签

4.合并单元格

5.列表标签

1.无序列表(重点)

2.有序列表(理解)

3.自定义列表

6.表单标签

1.表单域

2.表单控件(表单元素)

(1)input输入表单元素

补.<label>标签

(2)select下拉表单元素

(3)textarea文本域元素

(3)textarea文本域元素

补.`<label>`标签

特殊字	描述	字符的代码
	空格符	` `
<	小于号	`<`(less than)
>	大于号	`>`(greater than)
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
x	乘号	`×`
÷	除号	`÷`
²	平方2(上标2)	`²`
³	平方3(上标3)	`³`