html学习笔记01
2018-03-16 21:52
507 查看
认识网页
网页组成
由文字、图片、输入框、视频、音频、超链接等组成。web标准
W3C组织(万维网联盟)Html (结构标准 ),相当人的身体。
Css 样式(表现)标准 , 相当与给人化妆 变的更漂亮。
Js 行为标准 , 相当与人在唱歌,页面更灵动。
浏览器内核
也就是渲染引擎(决定了浏览器如何显示网页的内容及页面的格式信息(兼容性问题)认识html
Hyper text markup language
超文本标记语言。超文本:超链接。(实现页面跳转)html结构标准
< !doctype html> 声明文档类型 <html> 根标签 <head> 头标签 <title></title> 标题标签 </head> <body> 主体标签 </body> </html>
html标签分类
单标签<! Doctype html>
双标签
<html> </html> <head></head> <title></title>
Html标签关系分类
包含(嵌套关系)<head><title></title></head>父子
并列关系
<head></head><body></body>兄弟姐妹
开发工具
Dw 历史悠久,设计师使用。Sublime 轻量级 有很多好用的插件。
Webstorm 重量级 太过智能。
标签
单标签
注释标签
<!-- 注释 -->
换行标签
<br> 或 <br />
水平线标签
<hr> 或 <hr />
双标签
段落标签
<p></p>
特点:上下自动生成空白行。br 换行不会生成空白行。
标题标签
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
h1 在一个页面里只能出现一次。(SEO 搜索引擎优化)
文本标签
<font size="" color=""></font>
文本格式化标签
文本加粗
<strong></strong> <b></b>
工作里尽量使用strong,对于盲人来说 strong有语义强调的功能。
文本倾斜
<em></em> <i></i> 工作里尽量使用em,原因同strong
删除线标签
<del></del> <s></s> 工作里尽量使用del
下划线标签
<ins></ins> <u></u> 工作里尽量ins
图片标签
<img src="" alt="" title=""width="" height="" >
Src 图片的来源 (必写属性)
Alt 替换文本 图片不显示的时候显示的文字(重要性:1.SEO 2.盲人阅读需求)
Title 提示文本 鼠标放到图片上显示的文字
Width 图片宽度
Height 图片高度
PS:图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放
路径(略)
相对路径绝对路径
超链接
<a href="" title="" target="">填写内容</a>
href 去往的路径(跳转的页面) 必写属性
title 提示文本 鼠标放到链接上显示的文字
target=”self” (默认值) 在自身页面打开(关闭自身页面,打开链接页面) Target=”blank” 打开新页面 (自身页面不关闭,打开一个新的链接页面)
锚链接
先定义一个锚点:超链接跳转到页面的任何位置。一般用于在页面下面的时候,点击回到最上面。名称AAA可以随意区,只要是标记作用。<p id="AAA"> </p> ... <a href="#AAA"></a> // 超链接到锚点
空链
不知道链接到那个页面的时候,用空链<a href="#">空链</a>
压缩文件下载
(不推荐使用)<a href="../../xxx.rar"></a>
超链接优化写法
<base target="_blank"> // 让所有的超链接都在新窗口打开
PS:写的位置在 head 里面。
特殊字符
列表
无序列表
<ul type=""> <li></li> 列表项 <li></li> <li></li> ...... </ul>
type="square"小方块
type="disc"实心小圆圈
type="circle"空心小圆圈
有序列表
<ol type="" start=""> <li></li> 列表项 <li></li> <li></li> ...... </ol>
type="1,a,A,i,I"type的值可以为1,a,A,i,I
start="3"决定了开始的位置。
自定义列表
<dl> <dt></dt> 小标题 <dd></dd> 解释标题 <dd></dd> 解释标题 </dl>
音乐标签
<!-- <embed src="" hidden="true"></embed> --> 此方法已无法显示 <ifream src="1.mp3" hidden=true""></ifream>
hidden="true"隐藏音乐标签
滚动
<marquee width="" height="" bgcolor="" behavior="" direction="" loop=""> </marquee>
width:宽度
height:高度
bgcolor:背景颜色
behavior:设置滚动的方式
alternate:在两端之间来回滚动
scroll:由一端滚动到另一端,会重复
slide:由一端滚动到另一端,不会重复
direction:设置滚动的方向
left | right | up | down
loop:滚动次数(-1:一直滚动下去)
head里面相关知识
charset编码
<meta charset="UTF-8">
ASCII/ANSI/Unicode 英语
GBK 亚洲通用字符集
GB2312 中文简体
Big5 台澳港繁体
UTF-8 世界通用字符集
name
关键字
<meta name="keywords" content="">
告诉搜索引擎你的站点的关键字。SEO优化使用
网页描述
<meta name="discription" content="">
告诉搜索引擎你的站点的主要内容。这个description是给SEO和用户看的。
作者
<meta name="author" content="名字">
告诉搜索引擎你的站点的制作者
文件检索
<meta name="robots" content="all | none | index | noindex | follow | nofollow">
http-equiv 网页重定向
<meta http-equiv="reflesh" content="5; http://www.google.com">[/code]
网页自动跳转:网页5秒后自动跳转到谷歌主页链接外部样式表
<link rel="stylesheet" type="text/css" href="1.css">rel="stylesheet":链接的是什么?样式表还是图标type="text/css" type="text/css":规定链接文件的MIME类型,就是说链接文件时css还是jshref="1.css":链接的文件路径设置 icon 图标
<link rel="icon" href="1.ico">表格
表格的结构
标准结构
<table> <thead> <tr> <td></td> <td></td> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> </tr> </tfoot> </table>
写<thead> <tbody> <tfoot>对SEO更好,不写也没问题。常见写法
<table width="300px" height="300px" border="5px" cellspacing="10px" cellpadding="0" bgcolor="pink" align="center" > <tr> <td>窗外的麻雀</td> <td>窗外的麻雀</td> <td>窗外的麻雀</td> </tr> <tr> <td>窗外的麻雀</td> <td>窗外的麻雀</td> <td>窗外的麻雀</td> </tr> <tr> <td>窗外的麻雀</td> <td>窗外的麻雀</td> <td>窗外的麻雀</td> </tr> </table>
width(宽度)
height(高度)
border(边框宽度)
cellspacing(单元格与单元格的距离)
cellpadding(内容距边框的距离)
bgcolor(表格背景颜色)
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ,tr或者td内容居中。快速建表格的方式
table>tr*3>td*5 + tab: 建立3行5列的表格表头
<caption></caption>:位于table标签和tr标签之间<table> <caption>表头</caption> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>单元格合并
<td colspan=“2”>填写内容</td>:合并同一行的单元格,合并行数为2<td rowspan=“3”>填写内容</td>:合并同一列的单元格,合并列数为3<table border="2" cellspacing="0" width="400" height="100" align="center"> <caption><strong>表头</strong></caption> <tr align="center" bgcolor="yellow" height="100"> <td colspan="2">在电线杆上多嘴</td> <!-- <td><strong>2</strong></td> --> <td>在电线杆上多嘴</td> </tr> <tr align="center" bgcolor="#CCC" height="100"> <td>在电线杆上多嘴</td> <td>在电线杆上多嘴</td> <td rowspan="2">在电线杆上多嘴</td> </tr> <tr align="center" bgcolor="#CCC" height="100"> <td>在电线杆上多嘴</td> <td>在电线杆上多嘴</td> <!-- <td><strong>3</strong></td> --> </tr> </table>表格标题
<tr> <th></th> <th></th> <th></th> </tr>
注意:将td改为th
特点:标题的文字自动加粗水平居中对齐边框颜色
<table bordercolor=""></table>内容对齐方式
<tr> <td valign="bottom">张三</td> </tr>valign="top | middle | bottom"补充:细线表格
<table width="500" height="300" bgcolor="green" cellspacing="1" > <tr bgcolor="white"> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgcolor="white"> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgcolor="white"> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgcolor="white"> <td></td> <td></td> <td></td> <td></td> </tr> </table>表单
组成
文本(提示信息)
表单控件
表单域
上面提示信息和表单控件等所在的区域 。<form action="1.php" method="get"></form>
action:处理信息method=”get | post”
get通过地址栏提供(传输)信息(可以在地址栏里看到你输入的账号和密码),安全性差。post 通过文件例如1.php来处理信息,安全性高。文本输入框
<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">
type:输入的是文本内容
name:输入框的名字
maxlength:限定输入文本长度
readonly:文本框只读
disabled:文本框未激活
value:输入框中的默认内容密码输入框
<input type="password" name="pwd">
PS:文本输入框的所有属性对密码输入框都有效单选框
<input type="radio" name="gender" checked="checked">男checked=”checked”设置默认选择项。
PS:当有多个单选框是如何设置只能有一个被选中?
只有将name的值设置相同的时候,才能实现单选效果。下拉列表
<select multiple="multiple"> <optgroup lable="分组名称"> <option>下拉列表选项</option> <option selected="selected">下拉列表选项</option> </optgroup> </select>multiple=”multiple”: 将下拉列表设置为多选selected=”selected”:设置默认选中项目<optgroup></optgroup>对下拉列表进行分组。Label="分组名称"分组名称。多选框
<input type="checkbox" checked="checked">
Checked=”checked” 设置默认选中项多行文本框
<textarea cols="130" rows="10"></textarea>
cols:控制输入字符的长度
rows:控制输入字符的行数文本上传控件
<input type="file">文件提交按钮
<input type="submit">
可以实现信息提交功能普通按钮
<input type="button" value="普通按钮">
不能提交信息,配合JS使用图片按钮
<input type="image" src="">
图片按钮可实现信息提交功能重置按钮
<input type="reset">
将信息重置到默认状态表单信息分组
<form action="1.php" method="post"> <fieldset> <legend>分组1</legend> </fieldset> </form><fieldset></fieldset>:对表单信息分组<legend></legend>:表单信息分组名称html5补充表单控件
<input type="url">网址控件 <input type="date">日期控件 <input type="time">时间控件 <input type="email">邮件控件 <input type="number" step="5">数字控件 <input type="range" step="50">滑块控件补充示例:
<!-- 表单域 --> <form action="1.php" method="post"> <!-- 对表单信息分组 --> <fieldset> <!-- 表单信息分组名称 --> <legend>分组信息</legend> <!-- 文本输入框 --> 账户: <input type="text" name="User" value="账号/邮箱/手机号"> <br> <!-- 密码输出框 --> 密码: <input type="password" name="Pwd"> <br> <!-- 文件提交按钮 --> <input type="submit"> <br> <!-- 单选框 --> <input type="radio" name="gender">男 <input type="radio" name="gender" checked="checked">女 <br> <br> <!-- 下拉列表 --> 省(市) <select> <!-- 下拉列表选项 --> <option value="">北京</option> <option value="">山东</option> <option value="">广东</option> <option value="">福建</option> <option value="">河南</option> <option value="" selected="selected">湖北</option> </select> <select> <!-- 对下拉列表分组 --> <optgroup label="湖北省"> <option value="">武汉</option> <option value="" selected="selected">襄阳</option> <option value="">天门</option> <option value="">荆州</option> <option value="">仙桃</option> </optgroup> </select> <br><br> <!-- 多选框 --> <input type="checkbox"> A <input type="checkbox" checked="checked"> B <input type="checkbox"> C <br><br> <!-- 多行文本框 --> <textarea cols="30" rows="10"></textarea><br><br> <!-- 文本上传控件 --> <input type="file"><br><br> <input type="submit"> <!-- 普通按钮 --> <input type="button" value="Button"> <!-- 重置按钮 --> <input type="reset"><br><br> <!-- 图片按钮 --> <input type="image" src="1.png" width="100"><br><br> <!-- 网址控件 --> <input type="url" value="http://www.baidu.com"><br><br> <!-- 日期控件 --> <input type="date"> </fieldset> </form>标签语义化
好的语义化的网站标准就是去掉样式表文件(css文件)之后,结构依然很清晰。
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)
什么用?
1:网页结构合理。
2:有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取。
3:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)。
4:便于团队开发和维护。
怎么做?
1:尽可能少的使用无语义的标签div和span。(比如使用p是段落标签)
2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利。
3:不要使用纯样式标签,如:b、font、u等,改用css设置。
4:需要强调的文本,可以包含在strong或者em标签中。
相关文章推荐
- HTML学习笔记01
- HTML学习笔记01(最基本的格式)
- 01html学习笔记
- CSS学习笔记01-块元素和内联元素.html
- HTML标记语言篇--学习笔记01
- (X)HTML学习笔记01_(X)HTML代码的结构
- 【html-01】h5教程学习笔记
- 【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇
- 【JAVAWEB学习笔记】01_HTML
- Web学习笔记 - HTML5篇 - 01. 开发环境(Intellij IDEA)安装
- 《Javascript高级程序设计》(第2版)学习笔记01--在HTML中使用
- 《HTML & XHTML权威指南》的学习笔记01 -- 第三章.HTML/XHTML文档的元素
- Head First HTML与CSS 学习笔记
- javascript学习笔记(一) 在html中使用javascript
- HTML&CSS基础学习笔记1.15-合并单元格
- opencv学习笔记-01 显示图像
- HTML学习笔记(六)
- html学习笔记(一)——什么是html及html标签
- Mars Android视频学习笔记——01_18_文件下载
- Lucene 学习笔记 01 —— Lucene 的使用简介和开发步骤