黑马前端教程01HTML-HTML

1.html初识

html指的是超文本标记语言,是一种标记语言。主要需要学习html标签。

1.1html骨架标签

标签名定义说明
html标签根标签
文档的头部在head标签中中必须设置title
文档的标题网页的标题
文档的主体包含所有页面内容

html标签名,类型,标签属性和大部分属性值建议统一用小写。

1.2html元素标签分类

分类:

常规元素(双标签)

<标签名>内容</标签名>

前面开始标签,后面结束标签,/为关闭符

空元素(单标签)

<标签名 />

里面不需要包含内容,只有一个开始标签不需要关闭。

1.3html标签关系

针对于双标签有两种:嵌套关系和并列关系

嵌套关系(父子关系):
<head>
     <title></title>
</head>
并列关系(兄弟关系):
<body></body>
<head></head>

建议:父子关系的标签,子元素最好缩进一个tab的键位。如果是并列关系,最好上下对齐。

2.代码开发工具

dreamweaver,sublimetText,WebStorm,Hbuilder

vscode中新建一个html文件,然后输入一个!,选择第一个选项,即可快速生成html文件的骨架。

3.文档类型

用法:
<!DOCTYPE html>
作用:

声明位于文档中的最前面的位置,处于标签之前。表明当前浏览器按照HTML5规范解析页面。

4.页面语言lang

<html lang="en">  

常用:en定义为英语,zh-CN为中文。

5.字符集

  <meta charset="UTF-8">

常用:UTF-8,gbk,gb2312(简单中文),BIG5(繁体中文)

6.HTML标签的语义化

标签语义化指的是标签的含义。

语义化的目的:

根据标签的语义,在合适的地方给出一个最为合理的标签,让结构更加清晰。

语义化的好处:

1.方便代码的阅读和维护

2.让浏览器或者网络爬虫可以很好的解析,分析内容

3.使用语义化标签会具有更好的搜索引擎优化

语义是否良好:

当我们去掉css之后,网页结构是否依然组织有序,并且具有良好的可读性。

遵循的原则:

先确定语义的HTML,再选合适的CSS。

7.html常用标签

7.1排版标签

主要和css搭配使用,显示网页结构的标签。

(1)标题标签h

一共6个等级,从

  • 加了标题的文字会加粗,h1的字号最大,然后依次递减。

  • 一行只能放一个标题

(2)段落标签p

作用:可以把html分割为若干个段落。

文本在一个段落中会根据浏览器的窗口的大小自动换行。

(3)水平线标签hr

创建横跨网页的水平线,将段落与段落之间隔开,使文档结构清晰。**


是单标签。**在网页中使用默认样式的水平线。

<hr /> 
(4)换行标签br

在网页中,一个段落文字会依次从左到右,直到浏览器的最右端,如果需要强制换行显示,那么就需要用到换行符号。

<br />
(5)div和span标签

div和span是网页布局主要的2个盒子,div和span标签是没有语义的。

<div></div>
<span></span>

他们两个都是盒子,用来装网页的,区别为:

div标签是用来布局的,一行只能放一个div。

span标签是用来布局的,一行可以放多个span。

7.2文本格式化标签

标签显示效果
加粗
斜体
加删除线
加下划线

7.3标签属性

<标签名 属性1="属性值1" 属性2="属性值2" > 内容 </标签名>

7.4图像标签img

<img src="图像url" />
属性:
属性属性值描述
srcurl图像的路径(必须)
alt文本图像不能显示时的替换文本
title文本图像悬停时展示的内容
width像素设置图像的宽度
height像素设置图像的高度
border数字设置图像边框的宽度
注意:

1.属性必须跟在开始标签中,位于标签名之后

2.属性之间不分先后顺序,标签名与属性,属性与属性之间以空格分开

3.采用键值对形式,key=“value"的格式

7.5 链接标签

<a herf="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>
属性作用
href指定链接目标的url地址,(必须属性),当有href属性时,就具备了超链接的功能。
target指定链接页面的打开方式。有self和blank,_self为默认值,_blank为在新窗口中打开。
注意:

1.外部链接需要添加http://

2.内部链接:直接链接内部网页名称即可

3.如果当时没确定,通常暂定义为空链接

<a href="#"></a>

4.不仅可以创建文本超链接,还可以创建各种网页元素(图像,表格,音频,视频)等超链接。

图像替代链接

<a href="http://wwww.baidu.com"> <img src="p1.jpg" /> </a>

当做某个文字即可,点开图像可以跳转至百度首页

7.6注释标签

语法格式:
<!-- 注释语句 --> 

快捷键是Ctrl + / 或者Ctrl + shift + /

注释标签内容不会在网页中展示。

8.路径

相对路径:同一级直接文件名引用;下一级用/表示;上一级用…/表示(上一级,下一级,同一级是图片位于HTML页面的位置)

绝对路径:以web站点根目录为参考基础的目录路径,为完整的文件路径或者完整的网络地址。(用的较少)写法为符号\

9.锚点定位

通过创建锚点链接,用户能够快速定位到目标内容。

创建步骤:

1.使用相应的id名称跳转至目标的位置(找目标)

2.使用

<a href="#id名">链接文本</a>

以上代表被点击的(拉关系)

10.base标签

语法:
<base target="_blank">
--写在head标签里面,表明所有链接都在新窗口中打开--

11.预格式化文本pre标签

预格式化文本

标签可定义预格式化文本,被
标签包围的文本通常会保留空格和换行符,文本呈现等宽字体。(怎么写怎么显示)

12.特殊字符

html为特殊字符准备了专门的替代代码:
特殊字符描述字符的代码
空格符&nbsp;
<小于号&lt;
>大于号&gt;

他们不是标签,而是符号。

13.表格,表单,列表

表格用来展示数据;表单用来收集用户信息;列表用来布局,列表可以页面布局整齐规范。

13.1表格
1.创建表格
<table>
    <tr>
    <td> 单元格内的文字</td>
        ...
    </tr>
    ...
</table>

创建表格的基本标签:table,tr,td缺一不可。

  • table用来定义一个表格标签
  • tr标签用来定义表格中的行,必须嵌套在table标签内。(行标签)
  • td(table data)用于定义单元格,必须嵌套在tr标签内。td指的是表格数据,即单元格的内容。(单元格标签)
2.表格属性
属性名含义常用属性值
border边框(border=“0”无边框)像素值
cellspacing单元格和单元格边框之间的空白间距像素值(默认2)
cellpadding单元格内容与单元格边框之间的空白间距像素值(默认1)
width表格宽度像素值
height高度像素值
align表格在网页中的水平对齐方式left,center,right
3.表头单元格标签th

作用:表头单元格位于第一行或者第一列,并且文本加粗居中

语法:替换相对应的单元格标签即可

4.表格标题caption
<table>
<caption> 我是表格标题 </caption>
</table>

注意:

  • caption元素定义表格标题,并且标题会被居中并且显示在表格上。
  • caption标签必须紧随table标签之后,并且这个标签只在表格里面才有意义。
5.合并单元格

1.两种方式

跨行合并:rowspan=“合并单元格的个数”

跨列合并:colspan=“合并单元格的个数”

2.合并单元格的顺序

先上后下,先左后右

3.三个步骤

  • 先确定跨行还是跨列
  • 根据先上后下,先左后右的原则找到目标单元格,然后写上要合并的数量
  • 删除多余的单元格
6.复杂表格划分结构

题头,正文和脚注。分别用:thead,tbody,tfoot来标注

注意:

  • 定义表格头部,存放标题。内部必须有标签
  • 定义表格的主体,放数据本体。
  • 放表格的脚注。

    以上标签都是放在table标签之内的。

13.2列表和表单

列表用来布局,可以装载文字,图表或者图片,自由组合度更高。

1.列表标签
  • 无序列表ul
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ......
</ul>

无序列表会自带样式属性。

  • 有序列表ol
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>
  • 自定义列表
<dl>
    <dt> 名词1 </dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>    
    ...
</dl>
2.表单标签

表单主要是为了收集用户信息,跟用户进行交互,收集用户资料。主要包含三大部分:表单元素,提示信息和表单域3部分组成。

  • input控件

    语法:

    <input type="属性值" value="你好" >
    

常用属性:

属性属性值描述
typetext单行文本输入框
typepassword密码输入框
typeradio单选按钮
typecheckbox复选框
typebutton普通按钮
typesubmit提交按钮
typereset重置按钮
typeimage图像形式的提交按钮
typefile文件域
name由用户自定义控件的名称
value由用户自定义input控件中的默认文本值
size正整数input控件在页面中的显示宽度
checkedchecked表示默认为选中状态(单选按钮和复选按钮)
maxlength正整数控件允许输入的最多字符数
  • label标签

    概念:label标签为input元素定义标注

    作用:绑定一个表单元素,当点击label标签时,被绑定的表单元素就会获得输入焦点。

    用法:

    **第一种:**label直接包括input表单。适合单个表单选择

    <label> 用户名:<input type="radio" name="username" value="请输入用户名"> </label>
    

    **第二种:**for属性规定label与哪个表单元素绑定(for+id)

    <label for="sex"></label>
    <input type="radio" name="sex" id="sex">
    
  • textarea控件(文本域)
    <textarea cols="每行中的字符数"  rows="显示的行数">文本内容</textarea>
    

    通过textarea控件可以轻松的创建多行文本输入框

  • select下拉菜单
    <select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        ...
    </select>
    

    注意:

    1.中至少应该包含一对

    2.在option中定义selected="selected"时,当前选项即为默认选中项

3.表单域

form标签用于定义表单域,以实现用户信息的收集和传递,form中所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

常用属性:

属性属性值作用
actionurl地址指定接受并处理表单数据的服务器程序的url地址
methodget/post设置表单数据的提交方式
name名称指定表单的名称,以区别一个页面中的多个表单
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值