html知识点

最新推荐文章于 2023-02-14 11:53:26 发布

青石古道

最新推荐文章于 2023-02-14 11:53:26 发布

阅读量161

点赞数

分类专栏： html+css学习笔记文章标签： html

本文链接：https://blog.csdn.net/qq_40918218/article/details/112604730

版权

html+css学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html+css知识点

一、常用浏览器和其内核。

浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

IE:    Trident
Firefox:   Gecko
Chrome/Opera:   Blink
Safari   :   Webkit

二、Web标准

W3C是国际最著名的标准化组织。

Web标准构成

结构(Structure) :用于对网页元素进行整理和分类，主要指html。
表现(Presentation) ：用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS。
行为(Behavior)：网页模型定义和交互编写，Javascript。

三、HTML标签

html是超文本标记语言，用来制作网页的语言。网页本质是html文件。

html标签关系（包含和并列）

<!DOCTYPE html>   /*文档类型声明，告诉浏览器哪种HTML版本来显示网页*/
<html lang="len">  /*定义文档显示语言，en英语，zh-CN中文*/
	<head>
		<mate charset="UTF-8" />     /*定义html文档使用的字符编码*/
		<title>  网页标题 </title>
	</head>
	<body>
		主体内容
	</body>
</html>

html常用标签

基础
<!DOCTYPE>     定义文档类型。
<html>         定义一个html文档。
<title>		   文档标题
<body>		   文档主体
<h1>to<h6>	   定义html标题级别
<p>				段落
<br/>			换行标签
<hr>			水平线
<!--...-->注释

文本格式化标签
<strong></strong>   加粗   <b></b>
<em></em>    倾斜   <i></i>
<del></del>   删除线   <s></s>
<ins></ins>   下划线   <u></u>

<div>和<span>盒子。
<div> 是一个块级元素，可包含标题、段落等。它的内容自动地开始一个新行。
而span是行内元素，在它的前后不会换行。没有实际意义，纯粹为了应用样式。
span可以作为div的子元素，反之不行。
两者默认都没有对元素内的对象进行格式化渲染。

<img />图像标签的属性
src        图片路径		必须属性
alt			文本		替换文本，图像不能显示的文字
title		文本		提示文本，鼠标放在图像上显示的文字
width 		像素		宽度
height		像素		高度
border		像素		边框粗细

超链接标签
外部链接 ：<a href="地址" target="_self"></a>
		 target 是打开窗口的方式，默认_self当前窗口打开页面。 _bank新窗口打开页面。
内部链接： <a href="index.html"></a>
空连接：<a href="#"></a>
下载链接：href里是一个文件或压缩包，会下载文件。
网页元素链接：图像、文本、音频等可添加超链接。
瞄点链接：快速定位页面某个位置。
		*在链接文本href属性中，设属性值（#名字）形式,如<a href="#one">一集</a>
		*找到目标位置标签，加id属性，如<h1 id="one">一集</h1>

表格标签
<table>  表格
		<tr>   行
			<td>表中单元格文字，必须在tr中</td>
		</tr>
</table>
此外还有<th></th>表头单元格。和td区别：表头单元格里面内容加粗居中显示。
<thead></thead>  表头区域
<tbody></tbody>  表格主体
上面两个都在table中。

表格标签属性：
	align		center\left\right	表格相对周围的对齐方式
	border		1或""			规定单元格是否有边框，""表示没有
	cellpadding		像素值		规定单元格之间的空白，默认1像素
	cellspacing		像素值		规定单元格之间的空白，默认2像素
	width		像素值或百分比		规定表格的宽度
	rowspan="合并单元格个数"，跨行合并（上侧的单元格为目标单元格）
	colspan="合并单元格个数"，跨列合并（左侧单元格为目标单元格）

无序列表
<ul>     <!-- ul中只能嵌套li,直接在ul中输入其他是不行的，无顺序 -->
		<li>无序列表</li>
		<li>22</li>
		<li>33</li>
</ul>
<ol>
		<li>有序列表</li>
		<li>列表1</li>
		<li>列表2</li>
</ol>
	<dl>
		<!-- 自定义列表，dl中只能放dt或dd -->
		<dt>名词1</dt>
		<dd>名词1解释1</dd>
		<dd>名词1解释2</dd>
	</dl>

在这里插入图片描述

三、表单标签

表单由表单域、表单控件、提示信息三部分构成。
form标签定义表单域

input表单元素

<form>
		用户名：<input type="text" name="username" value="请输入用户名"/><br />
		密码：<input type="password" name="pwd" /><br />
		<!-- name是表单元素名字，性别单选按钮必须有相同name，才能实现多选1。 -->
		<!-- 单选按钮和复选框都要有相同name值 -->
		<!-- name和value是每个表单元素都有的属性值，主要给后台人员使用 --
		性别:男<input type="radio" name="sex" value="男"/>
			女<input type="radio" name="sex" value="女"/><br />  
		提交：<input type="submit" />
	</form>

在这里插入图片描述

type属性：

button ：定义可点击按钮
checkbox :定义复选框
file: 定义输入字段和浏览按钮，供文件上传。
hidden: 定义隐藏的输入字段
image:定义图像形式的提交按钮
password:密码字段，该字段中字符被掩码
radio:定义单选按钮
reset:定义重置按钮，清除表单中所有数据
submit:提交按钮，把表单数据发送到服务器
text:定义单行的输入字段，用户可在其中输入文本，默认宽度20字符。

form除了type还有其他属性值，如：

name: 用户自定义值，定义input元素的名称
value:用户自定义值，规定input元素的值
checked：值checked,规定此input 元素首次加载时应当被选中，主要针对单选按钮和复选框。
maxlength:值正整数，规定输入字段中字符的最大长度。

label标签

label标签用于绑定一个表单元素。点击label标签中的文本时，浏览器自动把光标转到对应的表单元素上，用来增加用户体验。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
		<!-- label里的for属性应当与相关元素的id属性相同 ，这里点击男就可选中-->

select表单元素
制作下拉列表，option中定义selected="selected"时，当前项即为默认选中项。select中至少包含一对option

<select>
			<option>北京</option>
			<option selected="selected">上海</option>
			<option>广州</option>
			<option>深圳</option>
</select>

textarea表单元素
用来定义多行文本输入的控件。

<form>
	留言：
	<textarea cols="50" rows="4">太开心了，出去玩吧。</textarea>
</form>

在这里插入图片描述

四、特殊字符

&nbsp；		空格符
&lt；		小于号
&gt；		大于号
&yen；		人民币
&copy；		版权
&amp；		和号
&deg；		摄氏度
&reg；		注册商标
&plusmn；	正负号
&times；	乘号
&divide；	除号

青石古道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

html知识点

html+css知识点

一、常用浏览器和其内核。

二、Web标准

三、HTML标签

三、 表单标签

四、特殊字符

三、表单标签