HTML概述及用法

最新推荐文章于 2023-12-19 08:13:53 发布

星哆哆

最新推荐文章于 2023-12-19 08:13:53 发布

阅读量125

点赞数

分类专栏：技术

本文链接：https://blog.csdn.net/shuizimuzhonglingf/article/details/83176860

版权

技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML：

-HTML(HyperText Markup Language):超文本标记语言,一种纯文本类型的语言

– 使用带有尖括号的“标记”将网页中的内容逐一标识出来

-用该语言编写的文件,以 .html 或者 .htm 为后缀

• 由浏览器解释执行

标记语法：

-分双标记（也叫封闭类型标记）和单标记（也叫空标记，非封闭类型标记），内容写在双标记中；单标记没有内容。

单标记有：<img>、<input>

元素：

-即标记

• 每一对尖括号包围的部分

– 如 <body></body>包围的部分就叫做 body 元素

– 元素就像是小标签,用于标识网页文档的不同部分

• 元素可以包含文本内容和其他元素,也可以是空的,比如前面所述的空标记

块元素：独占一行，即会自动换行

标题元素：<hn>

段落元素：<p>

分区元素：<div>

行元素：不能自动换行

<span> 、<b>、<i>等

-----------------------------------------------

属性和值：

• 属性用来修饰元素

– 属性的声明必须位于开始标记里

– 一个元素的属性可能不止一个,多个属性之间用空格隔开

– 多个属性之间不区分先后顺序

• 每个属性都有值

– 属性和属性的值之间用等号连接

– 属性的值包含在引号中

------------------------------------

创建表格

• 定义表格:使用成对的 <table></table> 标记

• 创建表行:使用成对的 <tr></tr> 标记

• 创建单元格:使用成对的 <td></td> 标记

----------------------------------------------

列表的作用

• 列表是指将具有相似特征或者具有先后顺序的几行文字进行对齐排列

• 所有的列表都由列表类型和列表项组成

– 列表类型:有序列表<ol>和无序列表<ul>

– 列表项:<li>,用于指示具体的列表内容

-------------------------------------------------------------------------------------------

form表单：

• 主要属性

– action:定义表单被提交时发生的动作,通常包含服务方脚本的URL(比如JSP、PHP)

– method:指出表单数据提交的方式,取值为 get 或者post

– enctype:表单数据进行编码的方式

– name:表单名称

表单控件元素：

• 表单控件元素有

– input元素:文本输入控件、按钮、单选和复选按钮、选项框、文件选择框和隐藏控件等

– textarea元素

– select和option元素

– 其他元素

<input> 元素

• <input> 元素用于收集用户信息

• 该元素是一个单标记,语法为:<input />

• 主要属性

– type:根据不同的 type 属性值,可以创建各种类型的输入字段,比如文本框、复选框等

– value:控件的数据

– name:控件的名称

– disabled:禁用控件

• 文本框:<input type =“text” />

• 密码框:<input type =“password”/>

• 主要属性

– name:名称

– value :由访问者自由输入的任何文本

– maxlength :限制输入的字符数

– readonly :设置文本控件只读

• 单选框: <input type=“radio”/>

• 复选框: <input type=“checkbox” />

• 主要属性

– name:设置名称,并用于分组,一组单选框或者复选框的名称必须相同

– value:文本,当提交 form 时,如果选中了此单选按钮,那么 value 就被发送到服务器

– checked: 设置默认被选中

按钮

• 提交按钮: <input type=“submit”/>

– 传送表单数据给服务器端或其它程序处理

• 重置按钮: <input type=“reset” />

– 清空表单的内容并把所有表单控件设置为最初的默认值

• 普通按钮: <input type=“button” />

– 用于执行客户端脚本

• 主要属性

– name:名称

– value:按钮的标题文本

隐藏域和文件选择框

• 隐藏域: <input type=“hidden”/>

– 在表单中包含不希望用户看见的信息

– name 属性:名称

– value 属性:值

• 文件选择框（可用于上传）: <input type=“file” />

– name 属性:名称

-------------------------------------------------------------

<label> 元素

• 语法: <label>文本</label>

• 主要属性:

– for:表示与该元素相联系的控件的 ID 值

• 作用:

– 将文本与控件联系在一起后,单击文本,效果就同单

击控件一样

-------------------------------------------------------

选项框

• 两种:下拉选项框和滚动列表

• <select>:创建选项框

– name:选项框命名

– size:大于 1 ,则为滚动列表

– multiple:设置多选

• <option>:选项

– value:选项的值

– selected:预选中

###################################################

<!DOCTYPE html>

<head>

<title>my first html</title> #主题，浏览器顶部显示的内容

function show() {

alert('hello')

}

</script>

</head>

<body>

<input type="button" value="欢迎" οnclick="show()"> #点击按钮执行脚本。

#注释

<p>段落一</p> #paragraph，段落自带回车

<h1>标题一</h1> #header h1-h6

<p>

段落二

</p>

------------------------------------------------------------

<b>我的第一个页面</b> <br> #加粗

<i>我的第一个页面</i> <br> #倾斜

<u>我的第一个页面</u> <br> #下划线

<s>我的第一个页面</s> <br> #删除线

我<sub>我的第一个页面</sub> <br> #下标

我<sup>我的第一个页面</sup> <br> #上标

----------------------------------------------------------------------------

-----------------------------------------------------------

<a href="http://www.baidu.com" target="_blank">百度一下</a> #超链接

-------------------------------------------------------------

<a href="#char2">跳转到第二章</a> #锚点。用于链接到文档中的某个位置

<p>这是一个段落</p>

------------------------------------------------------------------

table>tr*3>td*3 #按tab键生成3*3的表格。

<table border="2px" width="300px" height="300px"> #定义表格的宽度与高度

<tr>

<td colspan="2">性别</td> #占用2列单元格为此单元格的一列

</tr>

<tr>

<td rowspan="2">man</td> #占用2行单元格作为此单元格的一行

</tr>

<tr>

<td>women</td>

</tr>

</table>

------------------------------------------------------------------

<ul type="none"> #无序列表

<li>

<ul>

<li>admin</li>

<li> service</li>

</ul>

</li>

</ul>

--------------------------------------------------------------------

<ol > #有序列表，默认以阿拉伯数字排序

<li>linux基础</li>

<li>operation</li>

</ol>

<ol type="I" start="3"> #用罗马数字排序

<li>cloud</li>

<li>python</li>

</ol>

-----------------------------------------------------------------------

<form action="https://www.baidu.com/s" target="_blank" method="get"> #提交表单执行某个动作，默认方法是get

百度搜索：<input type="text" name="wd">

</form>

<form action=""> #用户名密码表单

username: <input type="text" placeholder="用户名" maxlength="10" name="username"> <br>

password：<input type="password" placeholder="密码" name="password"> <br>

</form>

<form action=""> #单选框

你喜欢的课程是？ <br>

<input type="radio" name="course" value="linux">Linux系统管理<br>

<input type="radio" name="course" value="db">mysql<br>

<input type="radio" name="course" value="py">python<br>

</form>

<hr>

<form action="" method="post"> #复选框

你喜欢的课程是？<br>

<input type="checkbox" name="lesson" value="linux">Linux系统管理<br>

<input type="checkbox" name="lesson" value="db">mysql<br>

<input type="checkbox" name="lesson" value="py" checked>python<br> #默认必选项

</form>

-------------------------------------

<input type="hidden" name="hd" value="hide"> #隐藏域

上传文件：<input type="file"> #上传

</form>

-----------------------------------------

<form action=""> #下拉菜单

<option value="linux">linux</option>

<option value="db">mysql</option>

<option value="py">python</option>

</select><br>

</form>

-------------------------------
---------------------

星哆哆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML概述及用法

HTML：-HTML(HyperText Markup Language):超文本标记语言,一种纯文本类型的语言– 使用带有尖括号的“标记”将网页中的内容逐一标识出来-用该语言编写的文件,以 .html 或者 .htm 为后缀• 由浏览器解释执行标记语法：-分双标记（也叫封闭类型标记）和单标记（也叫空标记，非封闭类型标记），内容写在双标记中；单标记没有内容。单标记有：...
复制链接

扫一扫