【转】 前端笔记之HTML

【转】 前端笔记之HTML

前端三层:内容层(结构层)HTML、样式层(表现层)CSS、行为层JavaScript

语言

含义

结构层

HTML

HTML XHTML之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P标签表达了这样一种语义:“这是一个文本段。”

表示层

CSS

CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

行为层

JavaScript

负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

<html>

  <head>

         <title>网页标题</title>

     </head>

     <body>

         网页主体内容,给用户看的。

     </body>

 </html>
  1.  <html> 标签标示整个网页
  2.  <head> 标签标示网页头部,用于放当前网页配置信息,除了title标签,其他内容在浏览器上都不可见
  3.  <body> 标签标示网页主体,放置用户可见的内容
  4.  <title>标签标示网页标题,嵌套在<head>标签对中

 

            下面这一行代码,在设置页面的字符集编码:

 <meta charset="UTF-8">

 

 UTF-8  国际码,有世界上所有国家的文字和符号,占用空间大

 GB2312 国家码(中文字符集)

 GBK    国家码(中文字符集),GBKGB2312的超集(也就是说GB2312的字GBK都有,GBK有的,GB2312未必有)

 

            工作中用哪种?

1、如果网页中,没有怪异符号和其他国家文字(除了英文),那么使用GBKGB2312,因为文件体积小

2、如果网页中,有少数民族、韩语、日语、阿拉伯语等,就要用UTF-8

 


注释:

作用:实际工作中,注释是给程序员看的。

代码注释:浏览器看不见(程序不执行,忽略),人能看见

HTML注释基本语法

 <!--注释的内容-->


 

区分单双标签的方法:

需要划分范围的肯定是双标签,不需要划分范围的肯定是单标签

区分首尾:结束标签比开始标签多了“/”关闭

 <p></p>

 <hr />  水平线,自封闭单标签

 <br />  换行,自封闭标签

 


 

空白折叠现象

HTML对换行、空格、缩进不敏感,如果出现都视为一个空格。

总结:浏览器只认识标签。

 


 

特殊符号(转义符号)


 

图像标签(img

网页中能插入的图片格式:jpg、png、gif、bmp、webp

img是英语image单词的缩写,即图像的意思

img是自封闭单标签。

src是英语,source资源的意思

 img标签语法

 <img />

 

 <img src="01.jpg" />

任何语言写属性都要遵循键值对规则,html属性规则是:k="v",一个标签可以有多个属性,要求各个属性之间用空格隔开

<p k="v" k="v"></p>

 

属性名

属性值

src

图片的路径

width="300"

height="500"

300的宽度

500的高度

title

1、鼠标悬停在图片上,显示的提示文本

2、提升搜索引擎优化(SEO)

alt

当浏览器加载不到图片时才显示的文本

border

图片边框


 

路径:

1.相对路径

      从A文件(HTML文件)出发寻找B文件(资源文件),怎么找到对方,这个过程的路径叫做“相对路径”。

      相对路径是最常用的,一个网站都是使用相对路径,直接把整个项目拷走,都不影响整个项目的文件路径。

【同级路径】:

A文件和B文件都在同一个文件夹目录,路径写法:直接写文件名字。

【下一级路径】:

路径写法:文件夹名称/“/”表示打开下一级文件夹目录

 <img src="images/1.jpg">

 

【上一级】:

路径写法:../表示返回上一级,../../返回上两级

 <img src="../images/1.jpg">

 

2.绝对路径

【互联网绝对地址】:

一般以http://或https://开头的

<img src="https://img.alicdn.com/simba/img/TB1OgnIbxWYBuNjy1zkSutGGpXa.jpg">

 

【本地盘符地址】:

绝对路径:以file:\\\开头

<img src="file:///E:\广州爱前端3期\2018年03月06日-HTML基础第1天\案例\images\2.jpg">

 

注意:工作中使用相对路径和互联网地址,禁止使用本地路径。


 

<a>标签

互联网之所以称为“网”,就是因为网页和网页之间有超链接,用户可以点击链接进行互相跳转。

HTML中,制作超链接用a标签,a是单词anchor锚的简写。

http:// 超文本传输协议

https:// 安全的HTTP协议

 

<a></a>

 

<a href="http://www.baidu.com">百度</a>

 

a标签常用属性

 

属性名

属性值

href

链接地址

title

提示的文本

target

_blank   新窗口打开

_self    当前窗口打开(默认)

 

当不知道链接地址是什么的时候,使用href地址写法为“#”,在当前页面跳转:

1 <a href="#">空链接</a>  缺点:返回顶部并刷新页面

2 <a href="">空链接</a>   缺点:某些浏览器会打开资源管理器

以下两个空链接解决了以上两种链接的bug,推荐使用:

<a href="###">空链接</a>

<a href="javascript:;">空链接</a>

锚点链接:

锚点是网页制作中超链接的一种,能够迅速定位到某个位置的链接。

 

使用语法:

 1、在被点击的位置添加<a href="#abc">跳转到20的位置</a>

 2、在目标锚点的位置添加id属性,属性值可以自定义,也可以用name属性(name必须给a标签)

<p id="abc">20</p>

 

<a href="#abc">跳转到20的位置</a>

<a href="02-页面外部的锚点链接.html#hello"></a>

图片链接:

点击图片实现页面跳转的链接就是图片链接

做法:图片链接和文字链接一样,只不过把原来放文字的地方换成img标签即可。

<a href="http://www.baidu.com"><img src="images/2.jpg"></a>

base标签:

作用:统一设置当前html页面超链接的跳转地址和页面打开方式。

<base href="http://www.xxx.com" target="_blank">

<base target="_blank">



语义化:

一个好的标签语义化的网站,就是删除CSS样式表后,整个结构依然清晰,阅读好。

标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)

标签语义化意义:

1.网页结构合理       

2.有利于seo和搜索引擎建立良好沟通,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取;       

3.方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)      

4.便于团队开发和维护

 


 

列表:

为了描述列表语义,我们使用列表标签,列表分3种:无序列表、有序列表、定义列表

 

无序列表(ul):

 

ul是一个组合标签,这个标签要用,就必须要一组用,ul嵌套liul代表无序列表的整体,li代表列表的每一项。

 

规范结构:li列表项可以有无限个

<ul><li>水果</li><li>蔬菜</li><li>零食</li><li>零食</li>
</ul>

 

列表嵌套,列表可以无限嵌套列表:

<ul>
   <li>水果
        <ul>
            <li>葡萄
                <ul>
                    <li>红葡萄</li>
                    <li>青葡萄</li>
                </ul>
            </li>
            <li>香蕉</li>
            <li>橙子</li>
        </ul>
   </li>
   <li>蔬菜</li>
   <li>零食</li>
   <li>零食</li>
</ul>

经验:网站导航都使用ul结构制作

 

有序列表(ol):

 

ol是一个组合标签,这个标签要用,就必须要一组用,ol嵌套liol代表无序列表的整体,li代表列表的每一项。

 

规范结构:li列表项可以有无限个

 

<ol>
    <li>赵丽颖</li>
    <li>迪丽热巴</li>
    <li>柳岩</li>
    <li>志玲</li>
</ol>

 

规定列表顺序为降序。(9,8,7...)

<ol reversed="reversed">
    <li>赵丽颖</li>
    <li>迪丽热巴</li>
    <li>柳岩</li>
    <li>志玲姐姐</li>
</ol>

规定有序列表的起始值。

<ol start="20">
    <li>赵丽颖</li>
    <li>迪丽热巴</li>
    <li>柳岩</li>
    <li>林志玲</li>
</ol>

规定在列表中使用的标记类型type类型有:1AaIi

 

<ol type="I">
    <li>赵丽颖</li>
    <li>迪丽热巴</li>
    <li>柳岩</li>
    <li>志玲</li>
</ol>

 

重点:ulol标签对中,就是列表项,只能出现li标签,不允许出现其他内容和标签,但是li标签可以嵌套任意的内容。

 

定义列表(dl):

 

自定义列表不仅是一列项目,而是项目及其注释的组合。

 

自定义列表以<dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以<dd>开始。

 

我们更加习惯称呼它们为总分列表。

 

结构:dl嵌套dtdd

 

dl是定义项目列表的意思

 

dt是定义项目标题的意思

 

dd是定义项目描述或详情的意思

写法1: 

<dl>

     <dt>项目标题</dt>

     <dd>项目描述1</dd>

     <dd>项目描述2</dd>

     <dd>项目描述3</dd>

</dl>

写法2: 

<dl>

     <dt>项目标题1</dt>

     <dd>项目描述1.1</dd>

     <dd>项目描述1.2</dd>

     <dd>项目描述1.3</dd>

 

     <dt>项目标题2</dt>

     <dd>项目描述2.1</dd>

     <dd>项目描述2.2</dd>

     <dd>项目描述2.3</dd>

</dl>

 

工作中注意:

1、图文混排效果可以用dl制作,比较简单

2、dl中只允许出现dtdddtdd中可以放任意的内容和标签


 

表格(table):

表格基本结构:

2005年之前,国内的网站都是使用表格布局,缺点就是加载速度慢,现阶段只用表格制作数据统计布局

 

<table border="1" width="500" height="200">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>民族</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>赵丽颖</td>
        <td>18</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
    <tr>
        <td>刘德华</td>
        <td>58</td>
        <td></td>
        <td></td>
    </tr>
</table>

表格属性:

<table>标签属性

 

border="1"

表格边框

width="500"

height="300"

表格的宽度和高度,会自动平分

align="center"

水平对齐方式leftcenterright,这些属性也可以写在trtd身上

 

 

合并单元格:

 rowspan   合并行

 colsapn   合并列

<table border="1" width="500" height="200" align="center">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>民族</th>
        <th>性别</th>
    </tr>

    <tr>
        <td>柳岩</td>
        <td>28</td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td>刘德华</td>
        <td>58</td>
        <td></td>
    </tr>
</table>

 

表单

表单的作用:收集用户的信息,输入框、单选、多选、按钮等,都是表单。

<input>表单元素:

input表单元素是一个自封闭标签,它有一个type属性用于限定表单的类型。

 

类型

语法

描述

文本框

<input type="text">

 

密码框

<input type="password" />

 

单选框

<input type="radio" name="sex" />

1、实现单选功能,必须添加name属性,并且属性值要一致,将所有radio归为一类

复选框

<input type="checkbox" />

checked="checked" 设置默认选中属性

disabled="disabled"设置表单禁用属性

上传文件

<input type="file" />

 

提交按钮

<input type="submit" value="提交哦">

 

重置按钮

<input type="reset" value="重置哦">

 

图片按钮

<input type="image" src="reg.png">

 

普通按钮

<input type="button" value="普通按钮">

 


以上大部分表单都有三个共同属性:
valuenamedisabledname属性可以和后端交互数据,vlaue属性可以设置默认值,disabled规定当前input元素应该被禁用。

扩大触发区域:

为了提升用户体验,点击文字也能选中表单。

写法1:在文字上嵌套label标签,并且给标签添加for属性,在触发的表单元素上添加id属性,保证forid的值是一致。

1 <input type="radio" id="abc"> <label for="abc"></label>

2 <input type="checkbox" id="bbb"> <label for="bbb">我已阅读并同意相关服务条款</label>

写法2

1 <label><input type="radio" ></label>

下拉列表(select):

结构:select嵌套optionselect表示下拉列表的整体,option表示下拉列表的选项。可以在响应option的标签:selected="selected"设置默认选中状态

 

<select>
    <option value="北京">北京</option>
    <option value="广州">广州</option>
    <option value="上海">上海</option>
    <option value="深圳">深圳</option>
    <option value="东莞">东莞</option>
</select>

 

文本域(textarea):

 <textarea cols="50" rows="10">请仔细阅读!!!!</textarea>

 

 cols   水平方向显示的列表(宽度)

 rows   垂直方向显示的行数(高度)

 form标签(表单域):

所有要提交的表单元素,都必须放在form标签中。

 <form action="aaa.php" method="post" >

     ....

 </form>

 

有两个属性,这两个属性是和后台交互的,这是后台叔叔的工作,不归我们前端管。

 action  规定这个表单的内容,被提交到什么页面去处理

 method  规定以什么协议来提交给后台,可选:getpost

 

get 是伪装url形式提交数据

post是以报文体的形式提交数据

posted @ 2020-10-14 05:56  CLASSIC~W  阅读(99)  评论(0编辑  收藏  举报