HTML标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我利用vscode创建的第一个网页</title>
</head>
<body>
    <div>这是大盒子 会自动换行</div>
    <span>这是小盒子</span>   <span>不会自动换行</span>
</body>
</html>

图像标签

图像的标签属性注意点：

1.图像的标签可以拥有多个属性，不惜卸载标签名的后面

2.属性之间部分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.属性采取键值对的格式，即key="value" 的格式，属性 = "属性值"。

属性：属性值；说明

scr：图片路径；必须属性

alt：文本；替换文本。图像不能显示的文字

title：文本；提示文本。鼠标放到图片上现实的文字

width：像素；设置图片的宽度

height：像素；设置图像的高度

bother：像素；设置图像的边框粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我利用vscode创建的第一个网页</title>
</head>
<body>
    <h4>插入图片</h4>
    <img  src="屏幕截图 2022-04-29 210157.png"   height = 200/>
    <h4>alt替换文本</h4>
    <img src = "屏幕截图 2022-04-29 210157.png"  alt="你的名字"      width = "200"/>
    <h4>tltle 提示文本  把鼠标放到图片像显示文字</h4>
    <img  src="屏幕截图 2022-04-29 210157.png"  alt ="你的名字"  title = "你的名字" height = 200/>
    <h4>border给图片定义边框</h4>
    <img  src="屏幕截图 2022-04-29 210157.png"   height = 200  border = "15"/>

    
</body>
</html>

图像的路径

1.相对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

这里简单来说，图片先对于HTML页面的位置

同一级路径

图像文件位于HTML文件的同一级，如<img srd="baidu.gift"/>

下一级路径符号： /

图像文件位于HTML文件下一级如<img src="images/baide.gif" />

上一级路径符号： ../

图像文件位于HTML文件上一级如<img src ="../baidu.gif" />

2.绝对路径

绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

超链接标签

1.连接的语法格式

<a herf = "跳转目标" target = "目标窗口的弹出方式" > 文本或图像 < /a>

herf 用于指定连接目标的url 地址，（必须为属性）当为标签应用href 书香是，它具有了超链接的功能

target 用于指定链接页面的打开方式，其中_self 为默认值，_blank为在新窗口中打开的方式

2.链接分类

1.外部链接.例如 <an herf = "网站网址" > 链接按钮名称 </a>

2.内部链接：网站内部页面之间的相互连接.直接连接内部页面名称即可，例如<a herf ="index.html"> 首页 </a>

3.空连接：如股票当时没有一个确定的连接目标时 < a herf = "#" > 首页 </a>

4.下载链接：如果herf 里面没有地址是一个文件或压缩包，会下载这个文件

5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格和、音频、视频等都可以添加超链接

6.锚点链接：点击链接，可以快速定位到页面中的某个位置（在同一个hetml文件中）。第一步：在链接文本的herf属性中，设置属性值为#名字的形式，如<a herf = "#two" > 跳转名 < /a > 第二步：< h3 id = " # two " > 跳转名 < /h 3 >

注释标签

格式：< !--注释标签-->注释快捷键：光标定位到文字点击：Ctrl+/（仅能程序员看见）

特殊字符

空格：&nbsp小于号：&lt大于号：&gt

表格标签

1.表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据现实的非常完整，可独享很好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。

表格不是用来布局页面的，而是用来展示数据的

2.表格的基本用法

1.<table><table/>是用于定义表格的标签。

2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在<table></table>中。

3.<td> </td>用于定义表格中的单元格，必须嵌套在<tr> </tr>标签中。

4.字母td指表格数据（table data），即数据单元格的内容。

5.<th></th>表头单元格内容会居中加粗

3.表格的属性

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

表格的属性都需要写到<table>中

4.表格结构标签

1.<thead></thead>:用于定义表格的头部，<thead>内部必须拥有<tr>标签。一般手机位于第一行

2.<thody></thody>:用于定义表格的主题，主要用于放数据本体。

3.以上标签都是放在<table></table>标签中。

5.合并单元格

1.合并单元格的方式：

跨行合并：rowspan="合并单元格的个数"；

跨列合并：colspan="合并单元格的个数";

2.目标单元格：

跨行：最上侧单元格为目标单元格，写合并代码；

跨行：最左侧单元格为目标单元格，写合并代码；

3.合并单元格的步骤：

先确定是跨行还是跨列合并。找到目标单元格，写好合并方式=合并单元格的数量。比如：<td csolspan = "2" ></td>。删除多余的单元格

列表标签

1.无序列表

<ul>标签表示HTML页面中项目的武学列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。无序列表的基本语法格式如下：

<ul>

   <li>列表项1</li>

   <li>列表项2</li>

   <li>列表项3</li>

</ul>

1.无需列表的各个列表项之间没有顺序级别之分，是并列的。

2.<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或文字的做法是不被允许的

3.<li>和</li>之家相当于一个容器可以容纳所有的元素。

4.无序列表对待有自己的样式属性，但在实际使用时，我们会使用css来设置。

表单标签

表单由表单域、表单控件（表单元素）、提示信息组成。

1.表单域

<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交给服务器

格式：

<foem action ="url地址" method ="提交方式" name ="表单域名称" >

表单元素控件

</form>

常用属性：

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

2.表单控件

1.input输入表单元素

<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本空间、单选按钮、按钮等）。

格式：

<input type = "属性值" />

<input/>标签为单标签

type属性设置不同的属性值来指定不同的控件类型

属性值	描述
button	定义可以点击的按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和"浏览"按钮，空文件上传。
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除2表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器
text	定义单行输入字段，用户可在其中输入文本。默认宽度为20个字符

可以在<input>中添加name属性作为名字就可以实现radio的单选

除type属性外，<input>标签还有很多其他的属性：

属性	属性值	描述
name	由用户自定义	定义input元素名称
value	由用户自定义	规定input元素的值（按钮的字）
checked	checked	规定此input元素次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

<label>标签

<label>标签位于input元素定义标注（标签）。

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将光标转移到或者选择对应的表单元素上，来增加用户体验

语法：

<label for="sex">男</label>

<input type="radio" neme ="sex" />

核心：<label>标签的佛如属性应当与相关元素的id属性相同。

2.select下拉表单元素

在页面中，如果有多个选项让用户选择，并且想要借阅页面空间时，我们可以使用<select>标签空间定义下拉列表

语法：

<select>
    <option>选项名</option>
    <option>选项名</option>
    <option>选项名</option>
....
</select>

1.<select>中至少包含一对<option>

2.在<option>中定义selected = "selected"时，当前项即为默认选中项

3.textarea文本域元素

语法：

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

1.通过<textare>标签可以轻松地创建多行文本输入框
2.cols ="每行中的字符数" ， rows = "显示的行数" ，实际开发用CSS

LiuNengPython

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签

语义___________标签格式______________________推荐使用加粗标签 _______<strong> </strong> 或者 <b> </b> ________<strong>标签语义更加强烈倾斜 ___________<em> </em> 或者 <i> </i> ______________<em>删除线 _________<del>
复制链接

扫一扫