html
> 双标签:
<标签名>内容</标签名>
<body></body>
单标签:
<标签名/>
<br/>
utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。
标签的公用属性:
class:规定当前元素所引用的样式类名称
id:规定当前元素的网页上唯一标识,一般在css,js中会根据id检索当前的元素
name:当前元素在文档上的
style:规定当前元素的显示样式,取值为css样式表
title:规定当前元素的标题,类型为文本,可在工具提示中显示。
HTML提供了6个等级的标题(从大到小)
标题标签语义: 作为标题使用,并且依据重要性递减
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
段落标签:
单词缩写: paragraph 段落
<p>文本内容</p>
是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。
水平线标签:
单词缩写: horizontal 横线
<hr/>是单标签
在网页中显示默认的样式的水平线
换行标签:
单词缩写: break 打断 ,换行
<br/>
div span标签(重点)
div span 是没有语义的 是我们网页布局主要的2个盒子 css+div
div 就是 division 的缩写 分割, 分区的意思 其实有很多div 来组合网页。
跨度,跨距;范围
语法格式:
<div> 这是头部 </div> <span>今日价格</span>
文本格式化标签:
<b></b><strong></strong> ------文字以粗体的方式显示(XHTEL推荐使用strong)
<i></i><em></em>----------文字以斜体方式显示(XHTEL推荐使用em)
<s></s><del></del>--------文字以加删除线方式显示(XHTML推荐使用del)
<u></u><ins></ins>--------文字以加下划线方式显示(XHTEL推荐使用U)
图像标签img
单词缩写(image图像)
<img src="图像URL">
属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬浮时显示的内容
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 数字 设置图像边框的宽度
锚标签
单词缩写:anchor 锚
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。
target:用于指定链接页面的打开方式,其取值有self和blank两种,其中self为默认值,blank为在新窗口中打开方式。
注意:
1.外部链接 需要添加 http:// www.baidu.com
2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >
3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
锚标签定位:
使用 <a href="#id名">链接文本 </a> <br />创建链接文本。
使用相应的id名标注跳转目标的位置。
<a href="#id名"></a>
<h5 id="id名"></h5>
特殊字符标签:
它叫不换行空格
其他几种空格    
< 字符代码<
> 字符代码>
&和号 字符代码&
©版权 字符代码©;(搜狗输入版权可以看到符号)
®注册商标 字符代码®
注释标签
<!-- 注释语句 --> ctrl + / 或者 ctrl +shift + /
相对路径
以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。
图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如img src="logo.gif" /。
图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如img src="img/img01/logo.gif" /。
图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,如img src="../logo.gif" /。
绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的
“D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.itcast.cn/images/logo.gif”。
列表标签:
无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
注意:
1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!
有序列表 ol (了解)
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:
//大小字母A,B,C,D等
阿拉伯数字1.2.3等
大写罗马数字 ⅠⅡ Ⅲ Ⅳ等
小写罗马数字 i ii iii iv等
<ol type="A">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
所有特性基本与ul 一致。 但是实际工作中, 较少用 ol
自定义列表(理解)
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
创建表格
<table>
<caption>表格的标题</caption>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
</table>
1.table用于定义一个表格。
2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。
3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。
表格属性:
属性名border:设置表格的宽度。
属性名cellspacing 设置单元格与单元格边框之间的空白间距
属性名cellpadding 设置单元格内容与单元格边框之间的空白间距
属性名width 设置表格的宽度。
属性名height 设置表格的高度
属性名align left center right设置表格在网页中水平方式的位置
合并单元格(难点)
跨行合并:rowspan 跨列合并:colspan
合并单元格的思想:
将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。
公式: 删除的个数 = 合并的个数 - 1
合并的顺序 先上 先左
表单标签
属性
type有两个值 1text 文本输入框
name定义控件的名称
value 初始化值,打开浏览器,文本框中内容
size 设置控件的长度
maxlength 输入框最大输入字符数。
label标签(理解)
单选框<input type=“radio”>
复选框<input type=“checkbox”>
多行文本域
<form>
自我介绍:<br>
<textarea name="ziwojieshao" rows="5" cols="35">
</textarea>
</form>
label 标签为 input 元素定义标注(标签)。
作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
如何绑定元素呢?
for 属性规定 label 与哪个表单元素绑定。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
<form method="post"> 账号:<input type="text" name="zhanghao" size="10" maxlength="5"> <br> <br>
密码:<input type="password" name="mima" size="10"> <br> <br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
textarea控件(文本域)
如果需要输入大量的信息,就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
下拉菜单
使用select控件定义下拉菜单的基本语法格式如下
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意:
1、select</select中至少应包含一对option></option。
2、在option 中定义selected =" selected "时,当前项即为默认选中项。
表单域
在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性:
Action在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。
method用于设置表单数据的提交方式,其取值为get或post。
name用于指定表单的名称,以区分同一个页面中的多个表单。
注意: 每个表单都应该有自己表单域。
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">邮箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
<datalist id="cList">
<option value="前端与移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist><br>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<form action="">
<fieldset>
<legend>学生档案思密达</legend>
<label>姓名: <input type="text" placeholder="请输入学生名字"/></label> <br /><br />
<label>手机号: <input type="tel" /></label> <br /><br />
<label>邮箱: <input type="email" /></label> <br /><br />
<label>所属学院: <input type="text" placeholder="请选择学院" list="xueyuan"/>
<datalist id="xueyuan">
<option>java学院</option>
<option>前端学院</option>
<option>php学院</option>
<option>设计学院</option>
</datalist>
<br /><br />
<label>出生日期: <input type="date" /></label> <br /><br />
<label>成绩: <input type="number" /></label> <br /><br />
<label>毕业时间: <input type="date" /></label> <br /><br />
<input type="submit" /> <input type="reset" />
</fieldset>
</form>
<label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">毕业日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</fieldset>
</form>
————————————————
版权声明:本文为CSDN博主「飘…」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/luo609630199/article/details/80066436