HTML应知应会

tech2024-12-18  4

web标准

构成:结构、样式、行为

HTML超文本标记语言

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>

标签元素

双标签单标签

标签语义化 标签语义化的优点:显示清晰的页面结构、利于开发和维护、利于SEO、方便其他设备读取

排版标签:h1-h6 p < hr/> < br/> div span

文本格式化标签:推荐使用后边的语义更强

<b></b>and<strong></strong>文字加粗

<i></i>and<em></em>文字斜体

<s></s>and<del></del>文字删除线

<u></u>and<ins></ins>文字下划线

预格式化文本标签:<pre></pre> 写啥样显示哈样识别空格和换行

图像标签:<img src=""/>

图像标签属性:src alt title width height border

链接标签:<a href=" "></a>

链接标签属性:href target target是链接打开方式值有self默认值/_blank新窗口打开

锚点:<a href="#id"></a>

在head标签中添加base标签可以设置整体链接的打开方式

//给页面所有链接的打开方式设置为在新页面打开

注释标签:<!-- -->

块级标签:div p h1-h6 ul li ol

行内标签:span strong em del ins

特殊字符:空格 &nbsp; 小于号 &lt; 大于号 &gt;

表格table

表格是用来集中显示数据的

<table> <tr><td>一列</td><td>二列</td><td>三列</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table>

表头单元格标签:<th></th>

表格标题(表头)标签:<caption></caption>紧跟table标签之后

表格属性

border width height align表格在页面中的水平对齐方式,常用属性left、center、right

cellspacing单元格之间的空白间距,单边框表格可以将cellspacing的值设为0

cellpadding单元格内容与单元格边框之间的空白间距

合并单元格:

跨行合并:rowspan=“合并单元格的个数”

跨列合并:colspan=‘合并单元格的个数’

注意要将合并后多出的单元格删除

表格结构:

<thead></thead> 定义表头

<tbody></tbody> 定义表格主体

<tfoot></tfoot> 定义表格注脚

列表标签

无序列表 ul>li

有序列表 ol>li

自定义表格 dl >dt dd

表单标签

form表单域

收集的用户信息怎么传递给服务器?

通过form表单域

目的:

在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。

语法

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

常用属性:

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

input:

​ <input type="text" value="parker'/>

属性属性值描述typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮file文件域 属性说明作用type表单类型用来指定不同的控件类型value表单值表单里面默认显示的文本name表单名字页面中的表单很多,name主要作用就是用于区别不同的表单。checked默认选中表示那个单选或者复选按钮一开始就被选中了

label 标签

为了提高用户体验点击label包裹的元素会触发绑定的input焦点

使用方法一:

<label>用户名:<input type="text" value="parker'/></label>

使用方法二:

<label for="nc">用户名:</label> <input type="text" id="nc"/>

textarea文本域标签

多行文本输入框,文本域:多用于留言板

<textarea>我是默认文本</textarea>

select下拉列表标签

<select> //option中定义selected属性时,当前项默认选中 <option>选项1</option> <option>选项2</option> <option>选项3</option> </select>

书写约定

元素属性值使用双引号语法元素属性值可以写上的都写上
最新回复(0)