HTML超详细笔记——概述、基本语法、常用标签、字符转义、表格、表单

弥岛

已于 2022-09-16 23:44:51 修改

阅读量262

点赞数 1

文章标签： servlet java html

于 2022-09-16 22:33:32 首次发布

本文链接：https://blog.csdn.net/xinin919/article/details/126898784

版权

HTML概述

HTML指的是超文本标记语言

超文本:是指页面内可以包含图片、链接、声音,视频等内容

标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

HTML基本语法

1、语法：

<!DOCTYPE html> 向浏览器声明html语言的版本 
<html> 根标签
    <head> 网页头部里面设置元信息
        <meta charset="utf-8"> 浏览器解析网页时用的字符集
        <title></title> 中间加标题
        <link rel="icon" href="图片地址"/>标题图标
    </head>
    <body> 网页内容写在body中
    </body>
</html>

2、注释：快捷键ctrl+shift+/ 不显示在网页上

3、标签属性：

格式：属性名 = “属性值”

位置：<标签名属性名 = “属性值“ >xxx

多个：<标签名属性名 = “属性值“ 属性名 = “属性值“ >xxx

4、<开始标签>标签体<结束标签>：闭合标签

<标签名/>：自闭和标签

基本常用标签

标题标签<h1></h1>…<h6></h6>
段落标签<p></p>
换行标签<br/>
列表：
无序列表<ul><li></li></ul>
有序列表<ol><li></li></ol>
超链接<a></a>
图像标签<img/>
标尺线：<hr color="颜色" width="宽" size="高"/>

<a>超链接
<a href="链接地址" target="打开链接文档的位置">超链接的文字</a>
注：打开链接文档的位置：默认为_self在自身页面打开，_blank在新页面打开。

图像标签：
<img src="图像的路径" width="图像宽度" height="图像的高度"> border="1"/>
注：但宽高一般不建议使用
标签嵌套：
<a href="http://www.qq.com">
<img src="图片地址"/>
</a>

特殊符号转义

在HTML中预留的一些字符不能在网页中直接使用,为了可以使用他们，我们用字符转义。

例如：<b> 会被解析为b标签，空格,再多的空格都会当一个空格处理。

小于号<  &It;
大于号>  &gt;
空格     &nbsp;
版权(C)  &copy;
商标(TM) &trade;
注册商标(R)  &reg;

表格

1、表格的基本构成标签 table标签：表格标签 tr标签：表格中的行 th标签:表格的表头 td标签：表格单元格

2、表格的基本结构
<table>定义表格
<tr>定义表行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>

3、表格属性：

Border(边框)属性：border="number"

background(背景图像)属性：background="图片位置"

bgcolor(背景颜色) bgcolor="颜色"

width、height属性：width="300"height="200"

cellpadding="值" 设置内容到边框的巨鹿

cellspacing="值" 设置单元格边框与边框距离

align:表控制单元格内容水平对其方式，可选值包括left、center、right。

valign：控制单元格内容垂直对其方式。可选值包括top、middle、bottom

4、表格合并：

colspan属性(跨列合并单元格)：colspan="number"

rowspan属性(跨行合并单元格)：rowspan="number"

表单

1、表单：用于从前端网页向后端服务器发送数据的组件，表单中有许多输入性，选择型组件。

2、表单标签：表示多个组件在同一个表单中就是一个整体

action="后端服务器地址" method="提交方式"

3、input标签：

①.type属性：

<input type="text"/> 单行文本输入框

<input type="password"/>密码框基本语法

<input type="radio" value="" checked="">单选按钮基本语法

注：单选框通过name属性分组，name相同为一组，可以互斥，选择性组件需要赋予默认值。

<input type="checkbox" name="" value=""/>复选框基本语法

注：复选框也需要通过相同的name来分组，因为可能有多个复选框。

<input type="file" name="img"/>文件选择框语法

accept=“.文件后缀名,.文件后缀名… “ 限制文件类

②.其他属性：

name="userName"名字

value=""值

readonly="readonly" 只读，可以提交内容

disabled="disabled" 禁用组件不能再提交内容

placeholder=""提示内容不是实际的内容

注：checked="checked"为默认选中

4、select下拉框：

注：selected="selected"为默认选中

5、多行文本框：

< textarea name="mark" rows="5" cols="30"></textarea>

6、按钮

<intput type="submit" name="Reset" value=重填"> 重置表单内容 <intput type="submit" name="Reset" value=重填"> 提交表单内容到服务器 <intput type="submit" name="Reset" value=重填"> 普通按钮没有功能，只能被点击触发事件