目录
Html简单介绍
html是一种超文本标记语言,主要用于web开发工作,是web前端开发的基础。主要用于编写静态网页的框架结构。
除了开发阶段,html都是远程访问的。不需要联网就可以完成的操作,就是本地访问。
需要连接互联网才能完成的操作,就是远程访问。
Html结构简介
<元素 (标签) 属性=“属性值” 属性=“属性值”> 内容 </元素 (标签)>
元素(标签)基本都是成对出现的,如果一对之间,没有内容只包含属性即空元素(空标签),没有结束标签,可以在开始标签末尾加入 / 来表示结束,开始和结束标签也被称为开放标签和闭合标签
html当中的元素(标签)、属性以及所有的标点符号,都为英文(特别是逗号容易打成中文)
属性是在 HTML 元素的开始标签中规定,如果属性值本身就含有双引号,那么必须使用单引号
注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理 解。浏览器会忽略注释,也不会显示它们。
<!DOCTYPE html>>
<!-- 这是一个HTML文件(html5声明)-->
<!-- 它告诉浏览器网页所使用的 Html 规范是什么。 -->
<html lang="en">
<!-- html表示为代码的总体的开头,其中lang代表语言种类-->
<head>
<!-- html结构的“头”,主要作用为控制"身体" -->
<meta charset="UTF-8">
<!-- 字符集编码格式为UTF-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- html结构的"身体",网页内容都写在这里-->
</body>
</html>
Html基本语句
<body>
<p>我是段落标签</p>
<b>我会加粗的</b><br/>
<strong>我是强调并加粗的</strong>
<em>我是斜体,强调</em>
<h6>我是标题六</h6>
<h5>我是标题五</h5>
<h4>我是标题四</h4>
<h3>我是标题三</h3>
<h2>我是标题二</h2>
<h1>我是标题一</h1>
<sub>下标</sub>
<sup>上标</sup>
<del>今天天气不好!</del>
<span>今天天气真好!</span>
<hr />
<p>在页面中创建水平线,用于分隔内容。</p>
<div>我是块,用来当容器</div>
</body>
实体字符集
在HTML中连续的空格或空行都会被算作一个空格(行内元素/行内块元素)
显示结果 陈述 实体名称 空格
Html的元素简介
超链接
<a href = "#">内容</a>
1、内容一定要存在,否则页面上不会有超链接显示
<a href = "http://www.baidu.com">这是百度</a>
2、href的属性值,输入网址的时候,一定要有http://,否则网页无法正常显示。如果导入本地html文件,需要输入相对路径。
3、内容的位置可以是图片或其他 HTML 元素都可以成为链接,起到美观作用,增加用户体验。
4、使用 target 属性,你可以定义被链接的文档在何处显示: 默认为_self,在原窗口打开链接, _blank在新窗口打开,_top是跳出框架,如果页面被固定在框架之内。
5、name 属性规定锚点(书签),也可以用id 属性来替代 name 属性,命名锚点同样有效。
<h1 id="toubu">我是头部标题</h1> <a id="tou">我是头部内容</a> <a href="#tou">回到头部内容</a> <a href="#toubu">回到头部标题</a>
6、扩展:<a href = "#">内容</a>里的 # 包含了一个位置信息,默认的锚是 #top 也就是网页的顶端,死链接可以把 # 换成 javascript:void(0),这时候点击不会再有效果。
关于超链接的一些css属性演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{ /*css设定超链接没有下划线*/
color: red;
text-decoration: none;
font-size:50px;
background-color: black;
}
a:hover { /*css设定当鼠标悬停的时候的属性集合*/
color:blue;
text-decoration:underline;
font-size: 80px;
}
</style>
</head>
<body>
<h1 id="toubu">我是头部标题</h1>
<a id="tou">我是头部内容</a>
<a href="#tou">回到头部内容</a>
<a href="#toubu">回到头部标题</a>
<a href="#">hihiihi</a>
</body>
</html>
图片
<img src="#" title="#" alt="#"/>
1、src源属性(source)的取值可以是图片的相对路径,也可以是图片的网址;和超链接的href属性作用 基本相同;
2、title里的内容,鼠标悬停的时候会显示,为元素的额外信息(元素都有title属性);
3、alt属性用来为图像定义一串预备的可替换的文本,在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息;
4、图片可以设置宽和高,只设置一项,另一项浏览器会根据比例自适应,如果图像指定了高度宽度, 页面加载时就会保留指定的尺寸,如果没有指定图片的大小,加载页面时有可能会破坏页面的整体布 局;
有序/无序列表/定义列表
有序列表
<ol type="#" start="#"> <li>北京</li> <li>上海</li> <li>广州</li> <li>重庆</li> </ol>
type值只有五个,a,A,i(小写罗马字母),I(罗马字母/希腊),1
start:从几开始计数,只能是整数,小数点后面的不识别
无序列表
<ul type="disc"> <li>北京</li> <li>广州</li> <li>上海</li> <li>重庆</li> </ul>
默认type="disc"实心圆、 circle 空心圆 、square实心方块
定义列表(列表项<dt>;列表项的定义<dd>)
<dl> <dt>北京</dt> <dd>祖国首都</dd> <dt>石家庄</dt> <dd>河北省会</dd> </dl>
表格Table(基本特性display:table)
单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等;
<table border="1px" width="500px" height="200px" bordercolor="red"> <!-- 表格--> <caption>标题</caption> <thead><!-- 表格的页眉--> <tr><!-- 行--> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody><!-- 表格的主体--> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> <tfoot><!-- 表格的页脚--> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tfoot> </table>
注意事项及总结:
1、不要给table,th,td以外的表格标签加样式,会出现兼容性问题;
2、单元格默认平分table 的宽高;
3、th里面的内容默认加粗并且左右上下居中显示;
4、td里面的内容默认上下居中左右居左显示;
5、table 决定了整个表格的宽度;
6、table里面的单元格宽度会被转换成百分比;
7、表格里面的每一列必须有宽度;
8、表格同一竖列继承最大宽度;
9、表格同行继承最大高度;
10、IE7以下,表格td或者th不能为空,否则不显示表格占位,可以添加一个
内联框架iframe (display:inline)
a、Iframe - 设置高度和宽度:height 和 width 属性用于规定 iframe 的高度和宽度 ,属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%");
b、frameborder 属性规定是否显示iframe 周围的边框,设置属性值为"0" 就可以移除边框;
c、a元素的target属性指向页面中某个内联框架的name值,就可以把href里的地址在该框架中展示;
d、scrolling:规定是否在 iframe 中显示滚动条,属性值:yes/no/auto;
表单Form(display:block)
1、form,第一个作用是存放控件的容器,另外一个重要作用就是将表单提交给后台或者是另一个页面。
<form action=”url”method=”#”name=“#”enctype="text/plain">控件</form> url 此处为提交的对象,一般是.jsp/action/servlt method="#" 提交的方法,值get/post显性传参/隐性传参 enctype对表单数据进行编码值:application/x-www-form-urlencoded multipart/form-data text/plain
2、input,<input type="*" name="**"value="***" accesskey=""/>
text 文本框
password 密码
radio 单选
checkbox 复选
submit 提交
reset 重置
button 按钮
image 图片
file 上传
hidden 隐藏
search 搜索框(火狐暂不支持)
range 滑动条
用label标签进行标注,提升用户体验,for的值,就是input里id的值