html的认识
1、html是网页描述语言,不是编程语言;
2、注释: <!--HTML注释--> // /*CSS注释*/
3、标签分类
单标签:<br/> <hr/> <img/> <input/>
双标签:<div></div> <span></span>...
4、标签的关系
并列 -- 兄弟关系
嵌套 -- 父子关系
常用标记
常用标记(80%标签是语义化标签)
h1~h6: 一到六级标题标签,h1权重最高,表示着重显示,如给logo加h1标签;
<p>段落标签</p>
<em>倾斜,表强调,有语义</em>
<i>倾斜,没有语义,外观倾斜</i>
<strong>加粗,有语义</strong>
<b>加粗,没有语义</b>
<del>删除线,有语义</del>
<s>删除线,没有语义</s>
<pre>预格式化显示</pre>
<br/>换行,单标签
<hr/>分隔符标签,单标签
图像标记
<img src="图片路径" alt=“图片未加载时的替换文本” title=“鼠标经过图片时的悬停文本”>
(1)相对路径:
图片资源与当前网页在同一目录下,src="图片名.png"
图片资源在下一级文件夹内时,src="img/图片名.png"
图片资源的文件夹与当前网页的文件夹在同一目录下,src="../img/图片名.png"
绝对路径:带有盘符(如C盘)或网址(WWW)的
(2)alt:图片未加载时显示的替换文本
title:鼠标经过图片时显示的悬停文本
width/height:10px;款高只写一个时,图片按比例缩放
align:设置文本与图像的对齐方式 bottom,top,middle
列表 ul ol dl
列表ul,ol只能嵌套li,li里边可以嵌套其他标签,注意嵌套缩进,以便检查嵌套关系。
无序列表ul:
默认li前面有小原点,可以通过list-style清除或改变样式
<ul>
<li>1</li>
<li>2</li>
</ul>
有序列表ol:
默认前面有数字,可以用list-style清除或改变样式
<ol>
<li>1</li>
<li>2</li>
</ol>
自定义列表dl:
dd默认缩进
<dl>
<dt>
<dd>1</dd>
<dd>2</dd>
</dt>
<dt>
<dd>3</dd>
<dd>4</dd>
</dt>
</dl>
超链接标签
文字链接(默认蓝色文字加下划线):
<a href="跳转的网页链接地址" target=“/blank(在新窗口打开)” title=“鼠标悬停时提示文件”>
点击的内容 (即链接文字)
</a>
图片链接:
<a>
<img src=" 图片链接地址 "/>
</a>
锚点定位:
不跨页面的地址:
<a href="# id名">要点击的文字</a>
<p id="id名"></p >或<p><a name="id名"></a></p>(推荐使用name ,id一般用在CSS,JS中,是唯一的)
跨页面的地址:
<a href= "文件名+#id名"> <p id="id名"></p>
表格标记
表格框架
<table>-------表格 默认有边框
<caption>表格标题</caption>
<thead>--------表格头部
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>------表格主体,如果不写,默认添加
<tr> -----行
<td></td>
<td></td>
<td></td>
</tr>
<tr> -----行
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>---------表格尾部
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
表格默认样式
表格一般用来布局 ----> 更好的展示数据
th 表格表头单元格,水平垂直居中加粗
td 单元格,默认水平居左,垂直居中
表格常用属性
调整整个表格在页面中的位置: align: left/center/right
调整这个表格在竖直方向的位置: valign:top/center/bottom
调节单元格内的元素与左侧边框的距离: cellpadding: 6px; 【写成行内样式,写成属性不起效】
调节相邻单元格的边框间的距离: cellspacing: 0; 【写成行内样式,写成属性不起效】
合并单元格
跨行合并 n行 rowspan=“n”
先确定哪n个相邻列的单元格需要合并,
在要合并的第一个单元格加属性 rowspan="n",
再把其余n-1项相应的单元格删去。
跨列合并colspan=“n”
先确定哪n个相邻行的单元格需要合并,
在要合并的第一个单元格加属性 colspan="n",
再把其余n-1项相应的单元格删去。
表单标记
表单作用
表单用来搜集用户信息,实现人机交互。
一个完整的表单 = 表单控件(文本框 input)+ 提示信息(文本 value 或 placeholder)+ 表单域(外框form)
表单框架 ---->表单域+表单控件+提示信息
<form action="表单提交的地址"> // 快捷键: input:type
用户名: <input type="text" name="username"/> // 文本框
密 码: <input type="password" name="" placeholder=“占位文字”/> //密码框
性 别: <input type="radio" value="male" name="sex"/>男 //单选框
<input type="radio" value="famale" name="sex"/>女 //相同name值绑定同一组选项,实现排他项
爱 好: < input type="checkbox" name="hobby" checked="checked"/>A
< input type="checkbox" name="hobby"/>B
< input type="checkbox" name="hobby"/>C // 复选框
地 址: <select name="city"> //下拉列表
<option value="bj">北京</option>
<option value="bj">北京</option>
<option value="bj">北京</option>
<option value="bj">北京</option>
</select>
选择理由:<textarea name="words" cols="30" rows="10"> //文本域
文本内容
</textarea>
上传文件:<input type="file" name="resume/"> // 文件域
隐 藏:<input type="hidden" name=""/>
普通按钮: <input type="bottom" value="普通按钮"/> // 按钮
提交按钮: <input type="submit" value="提交按钮"/>
重置按钮: <input type="reset" value="重置按钮"/>
图片提交按钮: <inpue type="image" src="" alt=""/> 图片提交按钮
</form>
![input控件](https://img-blog.csdnimg.cn/20201011212856283.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAwOTkx,size_16,color_FFFFFF,t_70#pic_center)
各属性解读
value: 控件中的默认文本 ,也可以获得用户输入值,后台需要通过该值知道你输入或选的是什么值
name: 控件名字,表示表单元素名称,用于区别表单(同一name值绑定同一组控件,使本组控件与其他组控件互斥),携带数据去后台
checked="checked",或直接checked: 单复选框中的默认选中项
selected="selected“: 下拉列表中的默认选中项
readonly: 只读
disabled: 不能被操作,且不能被提交
表单实例(表单一般搭配table布局使用)
重新定义表单边框样式:
input{
outline-style: none; /*去掉轮廓线*/
border: 0 none; /*去掉边框*/
color: #757575; /*重新定义边框颜色*/
-webkit-appearance: none;
}
没有去掉轮廓线的文本控件,即使去掉了边框,选择输入框以后还是会出现方框,即轮廓线
密码框的提示文本一般用placeholder
lable标签(提高用户体验)
方法一:直接包含,适用于单个表单
<lable> 用户名:<input type=“”></lable>
方法二:for和id ,与锚点相似
<lable for="sex">男</lable>
<input type="radio" name="sex" id="sex">
html区块(div+span)一般用于布局
div(定义了文档的区域,块级 (block-level))
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
span(用来组合文档中的行内元素, 内联元素(inline)) HTML 元素是内联元素,可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。