HTML基础知识个人总结

最新推荐文章于 2024-03-16 16:59:41 发布

晓峰子

最新推荐文章于 2024-03-16 16:59:41 发布

阅读量430

点赞数

文章标签： HTML基础知识

本文链接：https://blog.csdn.net/G_spring/article/details/84894911

版权

1.页面基础结构

<!DOCTYPE html>
<html lang="en">
<!--头-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--css-->
    <link rel="stylesheet" href="">
   
</head>
<!--身体-->
<body>
<!--脚-->
<footer>
</footer>
<!--script-->
<script></script>
</body>
</html>

这个知识点主要是要注意HTML的整体结构，以及css、script的引入位置

2.块级元素以及行内元素的特征

块级元素基本特征：

能识别宽高
margin和padding的上下左右均可以调整
可以自动换行
多个块级元素标签在一起默认排列方式为从上至下

行内元素基本特征：

不自动换行
能够识别宽高
默认排列方法从左到右

常见块级元素有：div

常见行内元素有：span

3.标题及文字标签

标题标签：h1~h6

文字段落标签：

加粗标签： <string></string>

倾斜标签：

下划线标签：

删除线标签：<s></s>

强调：

文本强行换行：

字体颜色：

字体大小：

字体：或

加粗属性：font-weight:bold

锚文本，超链接：<a href=" http://www.baidu.com/"></a>

4.按钮

属性	值	备注
disable	disable	规定应该禁止该按钮
form	form-name	规定按钮属于一人或多个表单
name	button-name	规定按钮的名称
type	button reset submit	该按钮是提交按钮（除了IE外其他浏览器的默认值）可点击的按钮（IE浏览器的默认值）重置按钮（清除表单数据）
value	text	规定按钮的初始值

form属性的值必须是按钮所属表单的id。如需引用多个表单，使用空格分隔的列表。

name属性用于在JavaScript中岁元素进行引用，或者在表单提交之后，对表单数据进行引申。

方法：

属性	描述
onkeyup	松开一个键时执行的脚本
onblur	当元素失去焦点时执行的脚本
onclick	当元素区域内单击鼠标左键时执行的脚本
ondbclick	当元素区域内双击鼠标左键时执行的脚本
onfocus	当元素取得焦点时执行的脚本
onmousedown	当元素区域内按下鼠标键（不分左右键）时执行的脚本
onmousemove	当鼠标指针在元素区域内移动时执行的脚本
onmouseout	当鼠标指针移出元素区域时执行的脚本
onmouseover	当鼠标指针移入元素区域时执行的脚本
onmouseup	在元素区域内松开鼠标键（不区分左右键）时执行的脚本
onkeydown	按下一个键时执行的脚本
onkeypress	按下并松开一个键时执行的脚本

5.文本框

autocomplete	on off	规定是否使用输入字段的自动完成功能
checked	checked	规定此 input 元素首次加载时应当被选中
disabled	disabled	当 input 元素加载时禁用此元素
form	formname	规定输入字段所属的一个或多个表单
maxlength	number	规定输入字段中的字符的最大长度
name	field_name	定义 input 元素的名称
pattern	regexp_pattern	规定输入字段的值的模式或格式
placeholder	text	规定帮助用户填写输入字段的提示
readonly	readonly	规定输入字段为只读
required	required	指示输入字段的值是必需的
type	button checkbox file hidden image password radio reset submit text	定义可点击按钮定义复选框定义输入字段和“浏览”按钮，供文件上传定义隐藏的输入字段定义图像形式的提交按钮定义密码字段，该字段中的字符被掩码定义单选按钮定义重置按钮，重置按钮会清除表单中的所有数据定义提交按钮，提交按钮会把表单数据发送到服务器定义单行的输入字段，用户可在其中输入文本（默认宽度为20个字符）
value	value	规定 input 元素的值。

6.表格（表头）

<table>
    <!--表头-->
    <thead>
    <tr>
        <th></th>
    </tr>
    </thead>
    <!--表中数据-->
    <tbody>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>

在页面上铺表时即可利用这种表的格式。

table为表格整体框架，thead为表头，th一般放表头内容，tr为行内容，td为纵内容

7.图标

<img src="" alt=""/>

src和alt可互补，当src引入图片路径无法使用时，可用alt试试引用，你会发现惊喜

图标可任意在网上查找，直接下载对应代码，插入到你的代码中

8.下拉选择

<select>
	<option value="one">one</option>
	<option value="two">two</option>
</select>

9.单选以及复选按钮

<!--单选按钮-->
<input type="radio" name="radio" value="1" checked/>
<input type="radio" name="radio" value="2" />
<!--复选按钮-->
<input name="subject" type="checkbox" value="math">
<input name="subject" type="checkbox" checked value="math">
<input name="subject" type="checkbox" checked="checked" value="English">

checked和checked="checked"两者无区别，可通用

10.textArea

<textArea>标签定义多行的文本输入控件

<textarea rows="10" cols="30">我是一个文本框，我可以随意拖动改变大小。 </textarea>

rows控制初始显示行数，cols控制初始长度

11.日期选择控件

<input type="date" value="2015-09-24" min="2015-09-16" max="2015-09-26"/>

min、max可控制时间的最小值以及最大值

12.属性

晓峰子

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML基础知识个人总结

1.页面基础结构&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;!--头--&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;!--css--&
复制链接

扫一扫