web前端 html部分

最新推荐文章于 2024-07-31 14:35:30 发布

Ariel程序媛

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量1.1k

点赞数 1

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_50946154/article/details/123455150

版权

1.1语法规范

<html>
<head><title></title></head>
<body></body>
</html>

1.2标题标签

<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>

字体从大到小，每个标题独占一行

1.3 段落标签换行标签文本格式化标签

<p></p>段落标签 <br>换行标签
<strong></strong>/<b></b>加粗  <em></em>/<i></i>倾斜
<del></del>/<s></s>删除线 <ins></ins>/<u></u>加下划线

1.4div标签 span 标签

<div></div>一行只能放一个div，大盒子，单独占一行
<span></span>一行可以放多个span，小盒子

1.5 图像标签和路径

<img src="">插入图片

img标签属性
src 必须属性
alt 替换文本图片不能正常显示时，会显示替换文本
title 提示文本鼠标放到图像上显示的文字
width 设置图片的宽度
height 设置图片的高度
border 设置图片的边框粗细
注意：图像标签可以有多个属性，必须写在标签名之后，属性之间不分先后顺序，标签与属性，属性与属性之间必须有空格，
属性采取键值对的方式，即key="value"的格式，属性=”属性值“。
重点掌握：src属性是必须要写的，alt与title的区别。
目录文件夹：就是普通文件夹，只不过里面存放了我们做页面需要的素材，如HTML，图片等。
根目录：打开文件夹的第一层就是根目录。
相对路径：以文件所在位置为参考基础，而建立的目录路径。
简单来说，图片相对于html页面的位置。

同一级路径<img src="img.jpg">
下一级路径<img src="images/img.jpg">
上一级路径<img src="../img.jpg">

绝对路径:指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。
例如：C:\Users\web\images\img.jpg或https://www.baidu.com/images/logo.jpg

1.6 超链接标签

<a href="跳转目标" target="目标窗口弹出方式"></a>
属性

href :指定链接目标的url(必须属性）
target:指定链接页面的打开方式，默认_self在窗口打开页面，_blank在窗口打开页面
(1)外部链接 href的值为网站地址，例如：http://www.qq.com
(2)内部链接 网站内部之间相互连接，例如：href=“neibulianjie.html”
(3)空链接 href="#"
(4)下载链接 href的值为文件.exe或zip等压缩包形式
(5)网页元素的链接
例如：<a href="http://www.baidu.com><img src="logo.jpg"></a>
(6)锚点链接 点击链接，可快速跳到页面中某个位置
例如：在链接文本设置href属性值为#名字，
例如：<a href="#6">跳转到6</a>
然后到目标位置标签，设置Id属性=刚才的名字，
例如：<h3 id="6"></h3>

1.7注释标签和特殊字符

注释标签 
常用特殊转义字符

：&nbsp;空格符  &lt;小于号  &gt；大于号

1.8表格标签基本使用

(1) 表格相关标签

<table>
<thead>表格头部标签<tr>行标签<th>表头</th></tr></thead>
<tbody>表格主体区域标签<tr> <td>单元格标签</td></tr></tbody>
</table>

(2)表格属性
align 规定表格相对周围元素的对齐方式
border 规定表格单元是否拥有边框默认“”表示无边框
cellpadding 规定单元边沿与其内容之间的空白
cellspacing 规定单元格之间的空白
width 规定表格的宽度n
(3)合并单元格
rowspan：跨行合并
colspan:跨列合并
合并单元格三部曲：
1.先确定是跨行还是跨列合并
2.找到目标单元格，写上合并方式=合并的单元格数量
例如：<td colspan="3"></td>
3.删除多余单元格

1.9列表标签

(1)无序列表

<ul>
<li></li>
<li></li>
...............
</ul>

(2)有序列表

<ol>
<li></li>
<li></li>
...............
</ol>

(3)自定义列表

<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>

1.10 表单标签

表单：表单域，表单控件，提示信息

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

表单控件
(1)<input>输入表单元素单标签

<input type="属性值"  name="用户自定义" value="用户自定义 例如：请输入" 
checked="checked（规定input元素首次加载时应当被选中）" maxlength="规定输入字段中字符的最大长度">

name和value 是每个表单元素都有的属性值，主要给后台人员使用。
name 表单元素的名字要求单选按钮和复选框要有相同的name值。
type属性值：
button 定义可点击按钮
checkbox 复选框
file 定义输入字段和“浏览”按钮，供文件上传
hidden 定义隐藏字段
image 定义图像形式的提交按钮
password 定义密码字段
radio 定义单选按钮
reset 定义重置按钮，重置按钮会清除表单中的所有数据
submit 定义提交按钮
text 定义单行输入字段用户可在其中输入文本，默认宽度为20个字符
<label>标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点转到或者
选择对应的表单元素上，用来增加用户体验。
语法

<label for="sex"></label>
<input type="radio" name="sex" id="sex">
<label>标签的for属性应当与相关元素的id 属性值相同。

(2)<select>表单元素下拉列表

<select>
<option></option>
<option></option>
...........................
</select>

<select>最少包含一对<option>
<option>中定义selected="selected"时，当前项即为默认选中项

(3)<textarea> 表单元素用于定义多行输入的控件

<texrarea row="3(显示的行数)" cols="20(每行字符数)">
文本内容
</teatarea>