HTML笔记

一、HTML

1.注释

<!---->
<!--注释是代码之母-->

2.HTML文档结构

<!--主要的两层结构-->
<html>
    <!--head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的-->
	<head></head>
    <!--body内的标签 写什么浏览器就渲染什么 用户就能看到什么-->
    <body></body>
</html>


<!--全部的-->
<!--html样式-->
<!doctype html> <!--表示下列文档按照HTML5的格式-->
<html lang="en"> <!--默认语言使用英文-->

<!--head头部,主要用来完成一个网页的相关设置的-->
<head>
    <!--汉字编码,meta元,主要用来完成对应设置的-->
    <meta charset="UTF-8"> 
    <!--移动端开发设置-->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	
    <!--设置一个网站的搜索关键字-->
    <meta name="keywords" content="">
    <meta name="description" content=""><!-- 网站的描述内容-->
    <title></title>     <!--网站标签名字-->
    
    <style>
        /*书写样式的地方*/
    </style>
</head>

<!--主体部分-->
<body>
</body>

<script>
	/*也可以写到body内*/
</script>

</html>

1.1 head内常用标签

<head>

	<title>Title</title>  <!--网页标题-->
	
    <!--内部用来书写css代码-->
	<style>
        h1 {
            color: greenyellow;
        }
	</style>  

    <!--内部用来书写js代码-->
	<script>
        alert(123)
	</script>  

	 <!--设置网站小图标(浏览器标签页图标)-->
    <link rel="shortcut icon" href="路径/链接" type="image/jpg">
    
	<script src="myjs.js"></script>  <!--还可以引入外部js文件-->
	<link rel="stylesheet" href="mycss.css">  <!--引入外部css文件-->


	<!--当你再用浏览器搜索的时候,只要输入了keywords后面指定的关键字,那么该网页都有可能被百度搜索出来展示给用户(提升SEO)-->
	<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">

	<!--网页的描述性信息(百度搜索简介)-->
	<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!">  
</head>

1.2 body内常用标签

1.2.1 基本标签

<h1>我是一号标题</h1>
<h1>我是二号标题</h1>
<h1>我是三号标题</h1>

我是普通文本


<b>我能加粗</b>

<i>我能倾斜</i>

<u>下划线</u>

<s>删除线</s>    <!--中间带斜杠-->

<p>我是段落,会自动换行的那种</p>

<br> <!--换行-->

<hr> <!--分割线-->

通过上几个标签,我们会发现了一个现象,那就是有的换行有的不换行,如h标签、p标签就是换行的,而其他除了br换行符以外,其他的都是默认一行,这又是怎么回事呢。

1.2.1 块儿级标签与行内标签

1.块儿级标签:独占一行

如:h1~h6	p  div
1.块儿级标签可以修改长宽,行内标签不可以,修改了也不会变化。
2.块儿级标签内部可以嵌套任意的块儿级标签和行内标签。
	但是p标签虽然是块儿级标签,但是它只能嵌套行内标签 不能嵌套块儿级标签。如果你套了,问题也不大。因为浏览器会自动帮你解开(浏览器是直接面向用户的,不会轻易的报错,哪怕有报错用户也基本感觉不出来。)
   
总结:
  	只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
    但是p标签只能嵌套行内标签(HTML书写规范)

2.行内标签:自身文本多大就占多大

如:i u s b span
行内标签不能嵌套块儿级标签,可以嵌套行内标签。

1.2.3 特殊标签

&nbsp; <!--一个代表一个空格-->

&gt; 大于号

&lt; 小于号

&amp; '&'符号

&yen; 钱¥

&copy; 版权©

&reg; 商标®

展示效果:

  >  <  &  ¥  ©  ®

二、HTML常用标签

2.1 div与span标签

div  块儿级标签
span  行内标签

  上述的两个标签是在构造页面初期最常使用的,页面的布局一般先用div和span占位之后再去调整样式,尤其是div使用非常的频繁。
div你可以把它看成是一块区域,也就意味着用div来提前规定所有的区域,之后往该区域内部填写内容即可,而普通的文本先用span标签 。
<div>
   <p>嘻嘻哈哈</p>
</div>

<span>哈哈嘻嘻</span>
<span>哈哈嘻嘻</span>

2.2 img标签

格式:
	<img src='' alt='' height="" width="" title="">
	
src
	1.图片的路径,可以是本地的,也可以是网上的。
	2.url,自动朝该url发送get请求获取数据
alt
	当src的图片加载不出来时,输出alt后跟的内容

title=''
	可以在alt后面跟上title,当鼠标悬浮在图片上时可以展示title的内容

height='800px'
width=''
	高度和宽度当你只修改一个的时候,另外一个参数会等比例缩放
	如果你修改了两个参数,并且没有考虑比例的问题,那么图片就会失真(压缩)

示例:
width宽height高,默认就是该图片的像素,可按照该比例进行调整

<img src="xugav.JPG" alt="徐家汇" height="1512px" width="2016px">

2.3 链接标签

格式:	
	<a href="" target=''></a>

href
	1.放url,用户点击就会跳转到该url页面
    2.放其他标签的id值 点击即可跳转到对应的标签位置

target
	默认a标签是在当前页面完成跳转  _self    (默认为_self)
   你也可以修改为新建页面跳转			_blank

示例1:跳转至baidu.com

<!--当前页面跳转-->
<a href="https://www.baidu.com/" target='_self'>百度一下,你知道。</a>

<!--新建标签页跳转-->
<a href="https://www.baidu.com/" target='_blank'>百度一下,你知道。</a>

示例2:设置锚点(实现站内跳转)

<div style="height: 1000px;background-color: red" id="d1">顶部</div> 
<div style="height: 1000px;background-color: green" id="d2">中间</div>
<div style="height: 1000px;background-color: blue">底部</div>

<a href="#d1">回到顶部</a>
<a href="#d2">回到中间</a>
<!--通过绑定id值的方式,来进行跳转-->

补充:
1.id值
	类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
	该值有点类似于面向对象里面的继承 一个标签可以继承多个class值

2.4 列表标签

无序列表:

<ul>
    <li>第一项目</li>
    <li>第二项目</li>
    <li>第三项目</li>
</ul>

展示效果:
●第一项目
●第二项目
●第三项目

有序列表

<ol>
     <li>第一步</li>
     <li>第二步</li>
     <li>第三步</li>
 </ol>

展示效果:
1.第一步
2.第二步
3.第三步

其他样式:
 <ol type="A"> </ol> 表示开头用ABC表示
 <ol type="I"> </ol>表示开头用I、II、III
 <ol type="1" start="5"> </ol> 从5开始

自定义列表

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
</dl>

<!--展示效果-->
帮助中心
	账户管理	
	购物指南
	订单操作

<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
</dl>

展示效果:带缩进的
标题1
	内容1
标题2
	内容2

2.5 表格标签

<table border="6"> <!--加边框(这里写的是6,写1、2、3都行)-->
    <thead>  <!--表头(字段信息)-->
        <tr> <!--一个tr就是一行,下面的就是字段的内容-->
            <th>姓名</th>  <!--th加粗,td普通文本(这里的加粗不可以用b标签)-->
            <th>年龄</th>
            <th>爱好</th>
        </tr> 
    </thead>   
    <!--以上为表字段设置-->

    <tbody>    <!--表单(数据信息)-->
        <tr>
            <td>盖伦</td>  <!--td普通文本-->
            <td>39</td>
            <td>DBJ</td>
        </tr> <!--一个tr就是一行-->

        <tr>
            <td>娑娜</td>
            <td>18</td>
            <td>弹琴</td>
        </tr> <!--一个tr就是一行,在盖伦下面又插入一条-->
    </tbody> 
</table>

最终效果:

在这里插入图片描述

后续还可以通过td标签的 colspan rowspan属性进行水平方向和垂直方向的合并。(垂直方向占多行是向下的合并的,另外还要考虑带来的数据移位问题)

rowspan = 向下
colspan = 向右

例:
 <tbody>
	<tr>
		<td>张三</td>
		<td rowspan="2">100分</td>
		<td>第一名</td>
	</tr>
     
	<tr>
		<td>李四</td>
		<td>第二名</td>    <!--只写两条数据-->
	</tr>    
</tbody>

扩展,在表的上方加个名称

<table border="1">
	<caption><b>成绩单</b></caption>

扩展,表格底部tfoot

会出现飘黄,不影响,都是小意思
tfoot不受宽高调整的影响

<table border="1"  width="400" height="200">
    <thead>
        。。。。。略
    </thead>

    <tbody>
		。。。。。略
    </tbody>

    <tfoot>
        <td>总结</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
    </tfoot>
</table>

2.6 input表单标签

input标签
input标签就类似于前端的变形金刚,通过type属性变形。

- text	普通文本
- password	密文
- date	日期(可通过打开小日历进行勾选)
- submit	用来触发form表单提交数据的动作
- button	就是一个普普通通的按钮,本身没有任何的功能,可通过JS来定义各种功能
- reset:重置内容
- radio:单选
		默认选中要加checked='checked',可简写为checked
- checkbox:多选
		默认选中要加checked='checked',可简写为checked
- file:获取文件  也可以一次性获取多个
- hidden:隐藏当前input框

2.6.1 label表单语义化

<p>
	<!--带上label标签的话,可以通过点击“用户名”这些字段来跳转到输入框-->
    
    方法1:
	<label>用户名:<input type="text"></label>
    
    方法2:
    <label for="d1">用户名:</label>
    	<input type="text" id="d1"> 
</p> 


可以将整个标签包裹在内,可以将文件包裹在内,随后通过lable标签内的for属性的值,与input标签的id值进行匹配。

2.6.2 radio单选

<p>性别:
    <!--这里会飘黄,原因都是没有使用label,但是不影响-->
    <input type="radio" name="gender" value="male" checked><input type="radio" name="gender"  value="female"><input type="radio" name="gender" value="others">其他
</p>

<!--
	radio表示单选,这里不加name="gender"的话会发现,一旦选中就不不能取消了
    checked 表示默认选项 
	name表示后端收到数据的key
	value表示后端接收到的数据   这里的name和value必须都要有,与type="text"不同,这个不用value
-->

2.6.3 date日期标签

<!--date可以通过小日历来选中时间-->
<p>生日:
    <input type="date" name="birthday">    <!--这里需要加上name属性-->
</p>

2.6.4 checkbox多选

<p>爱好:
    <!--表示多选,checked表示默认选中-->
    <input type="checkbox" name="hoby" value="篮球">篮球
    <input type="checkbox" name="hoby" value="唱歌">唱歌
    <input type="checkbox" name="hoby" value="美妆">美妆
    <input type="checkbox" name="hoby" value="电影">电影
    <input type="checkbox" checked name="hoby" value="吃饭">吃饭
    <input type="checkbox" checked name="hoby" value="睡觉">睡觉
    <input type="checkbox" checked name="hoby" value="打游戏">打游戏
</p>


<!--
checkbox:默认选中
这里同样的,需要配置name属性以及value属性
-->

2.6.5 重置、提交、按钮

<input type="submit" value="注册">
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>点我</button>

<!--
 submit:用来触发form表单提交数据的动作
 button:就是一个普普通通的按钮 本身没有任何的功能 但是它可以使用js给它自定义各种功能
 reset:重置内容
-->

2.6.6 file文件

<p>个人照片:
    <!--file:获取文件  也可以一次性获取多个multiple-->
    <input type="file" multiple name="myfile">
</p>


我们在上传头像这一块,需要提交文件数据,但是已我们目前的代码,后端接收到的只是文件名,而并不是内容。

解决方法:在form标签的末尾添加 enctype="multipart/form-data"
<form action="" method="post" enctype="multipart/form-data">   
</form>

2.6.7 fieldset与legend

<form action="" method="post">
    <fieldset>
        <legend>自动化运维平台</legend>
        <p>
            <label>账号:<input type="text" name="username"/></label>
        </p>
            <label for="pwd"> 密码:</label><input type="password" id="pwd" name="password"/>
        </p>
        <input type="checkbox" id="remember-me" name="remember-me" value="True"/>  <label for="remember-me"> 记住我 </label>
        <input type="submit" value="登录" />
    </fieldset>
</form>

效果展示:
在这里插入图片描述

2.7 select标签

2.7.1 单选

<select name="addr" id="">
    <!--默认选中selected-->
    <option value="sh" selected>上海</option>
    <option value="bj" >北京</option>
    <option value="sz">深圳</option>
</select>

<!--
与input标签不同,只需要在select标签上添加name属性即可,
option不需要添加name属性,只需要添加value
-->

2.7.2 分组单选

<!--
	optgroup为组名,颜色加深。
-->
<select name="addr" id="">
    <optgroup label="上海">
        <option value="静安区">静安区</option>
        <option value="黄浦区" selected>黄埔区</option>
        <option value="徐汇区">徐汇区</option>
    </optgroup>

    <optgroup label="北京">
        <option value="朝阳区">朝阳区</option>
        <option value="海淀区">海淀区</option>
    </optgroup>

    <optgroup label="深圳">
        <option value="南山区">南山区</option>
        <option value="福田区">福田区</option>
    </optgroup>
</select>

2.7.3 多选

<!--
默认是单选,可以加mutiple参数变多选,
select多选
-->
<select name="star" id="" multiple>
    <option value="张国荣" selected>张国荣</option>
    <option value="刘德华" selected>刘德华</option>
    <option value="周杰伦" selected>周杰伦</option>
    <option value="吴签">吴签</option>
</select>

2.8 textarea大段文本标签

可获取大段文本

 <!-- textarea标签  获取大段文本-->
      <textarea name="" id="" cols="40" rows="4">
	  </textarea>
      <!--cols表示横向长度,rows表示纵向高度(宽度)-->

2.9 音频标签

<!--需要加上controls-->
<audio src="music.mp3" controls></audio>

src = 音频的路径
controls = 显示播放的控件、否则为空
autoplay = 自动播放(部分浏览器不支持)
loop = 循环播放

注:目前仅支持的音频格式为:MP3、Wav、Ogg


<!--还可以使用这个标签-->
<embed src="../static/music.mp3" width="400px" height="400px">

2.10 视频标签

<!--需要加上controls-->
<video src="video.mp4" controls></video>

src = 音频的路径
controls = 显示播放的控件、否则为空
autoplay = 自动播放(部分浏览器不支持,Chrome需要添加muted属性)
loop = 循环播放
muted = 静音播放
poster = 加载等待的画面图像

注:目前仅支持MP4 、WebM 、Ogg



<!--还可以使用这个标签-->
<embed src="../static/video.mp4" width="400px" height="400px">

2.10.1 谷歌浏览器自动播放

<!-- 
谷歌浏览器禁用了自动播放功能,如果想自动播放,需要添加 muted 属性 
(静音播放)
-->
<video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="../static/video.mp4" type="video/mp4">

</video>

2.11 总结

针对用户选择的标签,需要加name、value属性。

<p>gender:
	<input type="radio" name="gender" value="male"><input type="radio" name="gender" checked value="female"><input type="radio" name="gender" value="others">其他
</p>

<p>hobby:
	<input type="checkbox" name="hobby" value="basketball">篮球
	<input type="checkbox" checked name="hobby" value="football">足球
	<input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
	
<p>addr:
	<select name="addr" id="">
		<option value="上海" selected>上海</option>
        <option value="北京">北京</option>
        <option value="深圳">深圳</option>
	</select>
</p>

针对用户输入的标签。如果你加了value 那就是默认值

<label for="d1">
	username:<input type="text" id="d1" name="username" value="默认值">
</label>

另外还可以跟上:
	disable 禁用(输入框变成灰色,无法选中。)
	readonly只读(输入框可以选中,颜色也无变化,但是不可编辑。)

我们在上传头像这一块,需要提交文件数据,但是已我们目前的代码,后端接收到的只是文件名,而并不是内容,解决方法:在form标签的末尾添加 enctype=“multipart/form-data”

<form action="" method="post" enctype="multipart/form-data">   

</form>

三、input标签补充

3.1 required

'''
作用:
	标记一个字段是否为必须,如果字段无数据则无法提交

格式:
	<input type="text"  name="name" required="required">
'''

使用效果如下:
在这里插入图片描述

3.2 pattern

'''
作用:
	与required配合使用,利用正则可实现对用户输入的内容做校验,不符合正则的,则不能提交

格式:
	<input type="text"  name="name" required="required" pattern="\d">
'''
这里的正则仅做演示,作用为仅匹配数字

使用效果如下:在这里插入图片描述

3.3 placeholder

'''
作用:
	用来提示用户输入的,当用户真的输入了文字之后,会被输入的文字覆盖。、

格式:
	<input type="text"  name="name" placeholder="张三">
	<input type="password"  name="password" placeholder="123">
'''

注:
	placeholder与value都可以做到给用户提示的效果,但是前者仅做提示,并不能直接当做默认数据进行提交,因为后端收不到数据。
    
    后者value可以当做默认数据来直接提交,但是当用户需要进行修改时,还需要删除掉原来的“默认”数据,体验不好。  

在这里插入图片描述

3.4 readonly

'''
作用:
	使输入框无法进行编辑,但数据可以正常提交。
	
格式:
	<input type="text" name="name"   value="张三" readonly>
	<input type="password" name="passwd">
'''
提交到后端的数据:
	(以Django框架为例子)
	<QueryDict: {'name': ['张三'], 'passwd': ['123']}>
    后端可收到数据。

3.5 disabled

'''
作用:
	禁用,完完全全的禁用。后端完全收不到该字段的数据。
	
格式:
	<input type="text" name="name"   value="张三" disabled>
	<input type="password" name="passwd">
'''
例如:
	<QueryDict: {'passwd': ['123456']}>

3.6 autofocus

'''
作用:
	当页面加载完毕时,获取焦点(加载完就选中输入框)
	
格式:
	<input type="password"  name="passwd" placeholder="123" autofocus>
'''

3.7 maxlength

'''
作用:
	限制输入数据的长度,超出长度的数据则无法输入进去,自然后端也就收不到。
	
格式:
	<input type="password"  name="passwd" placeholder="123" maxlength="5">
'''
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿煜酱~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值