URL包括三个部分:协议、域名、路径
htyper text markup language (html) 即超文本标记语言
前端一共包括三个内容:html、css、js
html做为基础,让CSS进行渲染,js进行动画
<h1> </h1> 这个整体就是h1标签,标签的名字就是h1,h就是head的缩写,是标题的意思,是闭合标签
<head>标签里面的内容都是网页上看不到的内容,但是都和浏览器解析有关的一些内容
标签不区分大小写,推荐使用小写
标签的属性写在标签中,如:<h1 id='123'>,属性是由一组组的键值对来表示的,只能出现在开始标签或自闭合标签中。
如果属性名和属性值完全一样,直接写属性名即可,这是缩写的一种表现
有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />自闭合标签中的/可以加也可以不加,可以放前面也可以放后面,通常放后面,这样只是为了方便看。
<mate>标签
meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
<meta charset="UTF-8"> <meta http-equiv="refresh" content="2,url=http://www.jd.com">
前面的为秒数,后面的为地址,地址必须要有http://,前面的url=可以不加,不区分大小写,不加后面URL的话,就是刷新本页面 <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7">
name属性一共有两个值:keywords/description
<title>标签
<title>博客园</title>
title标签中的内容就是显示在打开网页的最上面的。
<link>标签
rel:relationship的英文缩写,rel属性用于定义链接的文件和HTML文档之间的关系。
注意:HTML中只有在使用了 href 属性的情况下才能使用 rel 属性。
rel属性是必需的。定义当前文档与被链接文档之间的关系。
href是Hypertext Reference的缩写。意思是指定超链接目标的URL。
<link rel="icon" href="http://www.jd.com/favicon.ico">
以下为body标签:
<h1>标签
h标签只有6个,就是h1-h6,是块级标签
<p>标签
段落标签,不仅换行,而且中间还隔行,是块级标签
<p>床前明月光</p> <p>疑是地上霜</p>
<br/>换行标签
br是break的简写。由于html对于多个空格或换行,只认为是一个空格,所以需要此标签
床前明月光<br/> 疑是地上霜
<hr/>水平线标签
<div>标签
div标签的功能是什么能功能都没有,是一个块级标签
hello before<div>hello world</div> 显示结果: hello before hello world
<span>标签
span标签和div标签一样,都是什么功能都没有,是内联标签。
<img>标签
img是给网页加图片的标签,是内联标签
<img src="1.jpg" width="200px" height="200px" alt="图片加载不成功时提示的" title="鼠标放在图片是显示的文字">
<a>标签
a标签是内联标签
a标签两个功能:1、链接 2、锚(href后面引用的id前面一定要加#号)
<a href="http://www.baidu.com" target="_blank" title="鼠标放在文字上显示的内容">百度</a> traget的作用是在当前页打开还是从新开一页,blank是新开一页 <a href="#div1">第一章</a> <div id="div1">第一章内容</div>
列表标签
ul是unordered list 无序列表
ol是ordered list 有序列表
dl是defind list 定义列表,目录那种格式
dt是defind title 定义标题
dd是defind data 定义数据
<ul> <li>1111</li> <li>1111</li> <li>1111</li> </ul> <ol> <li>2222</li> <li>2222</li> <li>2222</li> </ol> <dl> <dt>第一章</dt> <dt>第二章</dt> <dt>第三章</dt> </dl>
<table>表格标签
border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. <tr>: table row <th>: table head cell <td>: table data cell rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列(即合并单元格) <th>: table header <tbody>(不常用): 为表格进行分区.
示例:
<table border="1"> <tr> <th>姓名</th> <th>性别</th> <th>邮箱</th> </tr> <tr> <th rowspan="2">姓名</th> <th>性别</th> <th>邮箱</th> </tr> <tr> <th colspan="2">性别</th> </tr> </table>
<form>标签
所有的表单内容都要放在form标签中,不然这些数据都不知道要发到哪。
form表单中有input、select、textarea、label标签
input标签中又有很多的类型。
select标签中要插入<option>或<optgroup>标签
label标签通过id和其它标签进行关联
<form action="/xiaohu" method="post" enctype="multipart/form-data"> <p>用户名:<input type="text" name="username"></p> <p>密码:<input type="password" name="pwd"></p> <p>性别:男<input type="radio" name="sex" value="0"> </p> <p>女<input type="radio" name="sex" value="1"></p> <p>爱好:篮球<input type="checkbox" name="hobby" value="basketball"></p> <p>足球<input type="checkbox" name="hobby" value="football"></p> <p><input type="file" name="doc"></p> 出生地:<select name="city" multiple size="2"> <option value="beijing">北京</option> <option value="tianjing">天津</option> <option value="shanghai">上海</option> <option value="jiangsu">江苏</option> </select> 城市:<select name="province" > <optgroup label="江苏省"> <option value="nanjing">南京</option> <option value="suzhou">苏州</option> <option value="yangzhou">扬州</option> </optgroup> <optgroup label="北京省"> <option value="chaoyang">朝阳</option> <option value="haidian">海淀</option> <option value="yizhuang">亦庄</option> </optgroup> </select> <textarea rows="20" cols="20">自我简介</textarea> <label for="idhao">姓名</label> <input id="idhao" type="text"> <p><input type="submit" value="提交"></p> </form>
form标签里面如果不填action和method时,会有一个默认值,默认当前URL和GET方法
input标签是自闭合,内联标签
<QueryDict: {'pwd': ['77932423'], 'sex': ['0'], 'hobby': ['basketball', 'football'], 'username': ['bili']}>
file: <MultiValueDict: {'doc': [<InMemoryUploadedFile: 20180326121913.png (image/png)>]}>
表单是以一个字典的形式发过去的,键就是input中的name属性,值是一个列表,对于文本框,值就是输入的内容,对于选择框,值要在input中设置value。
<select>中mutiple属性的效果是可以选择多个,size的效果是能同时看到几个选择项
其它标签:
注意:这些标签都是内联标签
<b>给字体加粗</b> <em>变成斜体</em> <strike>去除</strike> <del>delete</del>
2<sup>3</sup>
2<sub>3</sub>
显示结果: 给字体加粗 变成斜体 去除 delete 23 23
特殊符号:
代表一个空格
© 代表版权符号
< 代表小于号
> 代表大于号
注意:所有的标签统分为块级和内联
内联(in-line)标签就是自己占一块,占多少取决于中间内容大小。块级(block)标签。