文章目录

概念
- html 超文本标记语言
- 作用
html 基本用法
- 标签入门
- - 标签语法
  - 标签分类
  - - 双标签 (围堵标签)
    - 单标签
- 属性入门
- html 基本构架
- 简单标签
- - 举例常见标签
  - 标题标签的四个特点
  - 其他标签
  - 注释标签
  - 特殊符号
- 复杂标签
- - font 字体标签
  - body 主体标签
  - img标签
  - a 超链接标签
  - - href 链接指向的位置
    - href 锚链接
    - target 页面打开方式
- 复合标签
- - 列表
  - - 有序列表
    - 无序列表
    - 项目列表
  - 表单
  - - input 输入框
    - 属性
    - button
    - - 默认选中
      - 只读和禁用
      - 标注 label
      - 表单验证
  - 表格
  - - 案例
  - iframe 内嵌框架
  - - 使用超链接在窗体上切换
  - frame 框架集窗口
- html 5 多媒体标签
- - 音频
  - 视频
颜色表示法
- 英文表示
- 十六进制表示法
- rgb 表示法
- rgba 表示法
- 使用软件获取屏幕上的任何颜色

概念

html 超文本标记语言

全写：HyperText Mark-up Language

概念: 一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。

超文本
标记

作用

主要用于网页的制作

html 基本用法

标签入门

标签语法

使用尖括号作为关键字的语法格式
标签需要成对出现 <>
标签中可以添加属性, 表示标签的具体实现细节
标签可以字母大写, 但是推荐使用小写

标签分类

双标签 (围堵标签)

它以开始标签及结束标签将文字围住，令其达到预期显示效果

<b>内容</b>  有加粗效果

单标签

标签单独出现，只有开始标签没有结束标签

不需要包含任何东西, 本身就具有某种含义

<br/> 换行

属性入门

hr  横线
是一条 颜色为红色 比较粗的一条横线
<hr/> 贯穿屏幕的一条横线
<hr color="red" size="5">
格式  <标签名 属性名="属性值" 第二个属性="">

html 基本构架

<!DOCTYPE html>        头声明
<html lang="en">      根标签<head>         头文件 <meta charset="UTF-8">    编码格式 <title>Title</title>   网页的标题</head><body>          身体, 主体网页文件</body>
</html>

使用webStrom 有快捷方式 生成基本架构
Html:5  加上 Tab 键 可以自动生成 基本架构
html:4s

简单标签

举例常见标签

<b></b>  字体加粗
<i></i> 字体倾斜
<u></u> 下划线
<s></s> 删除线<sub></sub> 下标文本
<sup></sup> 上标文本
<big></big> 字体变大
<small></small> 字体变小<center></center> 居中
<h></h> 标题标签
<h1>xxx</h1>~<h6>xxx</h6>

标题标签的四个特点

自动换行
自动加粗
自动调整字体大小
标题之间的留白

其他标签

<p></p>  段落标签  有换行功能 段落之间可以自动隔行
<abbr title="中国中央电视台">CCTV</abbr>
表示它所包含的文本是一个更长的单词或短语的缩写形式
可以在 <abbr> 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。

注释标签

<!-- -->

特殊符号

特殊符号	字符实体
空格	&nbsp(分号)
大于号>	&gt(分号)
小于号<	&lt(分号)
引号(")	&quot(分号)
版权符号©	&copy(分号)

复杂标签

font 字体标签

color 颜色直接写颜色名 red green blue
size 尺寸
- 取值 1-7 1最小 7最大
face 字体
- 计算机内部支持的所有字体
- 汉字 “楷体” 也可以写汉语拼音

body 主体标签

整个网页的主体部分, 主要的显示区域

添加背景颜色

背景 background   bgColor
bgcolor="green"

添加背景图片

background="图片名称"

设置全局字体颜色

text="red"
文本中 没有添加颜色的
// body 是其他子标签的父元素, 类似于 父亲的角色
如果儿子没有女朋友, 听父亲给他介绍的
一旦儿子已经有了自己的女朋友, 父亲给他介绍其他女朋友的时候, 儿子是不会屈服的

img标签

src
- source 的缩写, 源, 路径
width/ height
title
- 鼠标指向的时候, 弹出提示说明文字
alt 图片的替代文字

a 超链接标签

href 链接指向的位置

文本文件
图片文件
其他网页文件(.html)
网络地址
- 必须添加协议 http://

href 锚链接

// 页面回到顶部功能
1- 设定一个锚点
2- 回到锚点的链接, 将链接指向锚点
<!-- 该 a 标签 是一个锚点 -->
<a name="top"></a>
<a href="#top" >回到顶部</a>

target 页面打开方式

_blank   新页面打开
_self   自身页面打开

###一年四季网站

创建多个网页文件
通过a链接和 img 标签的组合 实现 点击链接切换图片的效果

复合标签

列表

有序列表

<ol><li></li><li></li>
</ol><!-- 有序 -->
<ol type="I"><li>王者荣耀</li><li>火影忍者</li><li>阴阳师</li><li>梦幻西游</li><li>炉石传说</li>
</ol>type 项目符号的显示方式 属性的值 1 a A i I
start 起始编号

无序列表

<ul><li></li><li></li>
</ul>type=""  空心圆 circle实心圆 disc小方块 square  无修饰   none使用场景 新闻网站

项目列表

<dl><dt>武侠人物</dt><dd>郭靖</dd><dd>黄蓉</dd><dt>演艺圈</dt><dd>赵丽颖</dd><dd>谢娜</dd>
</dl>武侠人物郭靖黄蓉杨康杨过
IT 行业支音曹伟继斌
演艺圈赵丽颖谢娜
场景 每个班 有多名学生  某公司, 多个项目组, 每个项目组又有多个组员

表单

input 输入框

<input />

input 属性	含义
text	文本
password	密码
number	数字框
email	邮箱
date	日期框
button	按钮
submit	提交按钮
reset	重置按钮
radio	单选钮需要配合name 属性
checkbox	复选框
file	文件选择框
hidden	隐藏域

非input 属性
select / option	下拉菜单 / 选项
button	按钮
textarea	大文本输入框

<textarea cols="50" rows="10">
</textarea>

属性

name 属性的含义 给表单元素起名称, 用于区分多个文本框
用户名 : <input type="text" name="username">
真实姓名 : <input type="text" name="realname">
- 在单选钮中 标识那些单选钮属于同一组的

value 属性  (英语  值)
用于指定表单元素初始值
value 放在 button中  用于显示 按钮的显示文字

size
指定表单元素的初始宽度
如果表单类型是 text 或者 password 表单元素大小以字符为单位
如果是其他类型 以像素为单位

button

<input type="button" value="点我一下">
<button>点我一下</button>

####拓展知识

默认选中

checked / selected

checked 默认选中
对单选钮和复选框生效 默认选中当前选项
如果是 下拉菜单 option 中 必须换成 selected

只读和禁用

readonly / disabled

用户名; <input type="text" value="张三" readonly/> <br><br>

<input type="submit" value="提交" disabled/> <br><br>
<button disabled>你好</button><br><br>

标注 label

<!-- 当鼠标点击标注文字的时候, 焦点到for指向的表单元素 -->
<input type="radio" name="sex" id="sex1">
<label for="sex1">男</label>
<input type="radio" name="sex" id="sex2">
<label for="sex2">女</label>

<label ><input type="checkbox" name="hobby"> 吃
</label>
<label ><input type="checkbox" name="hobby"> 喝
</label>

表单验证

placeholder / required

placeholder 提示信息  H5
用户名; <input type="text"  placeholder="必须输入6-8位英文"> <br>

<!-- required  验证 内容不能为空-->
用户名 <input type="text" name="user" required> <br><br>
required

<!--pattern 验证规范 正则表达式 -->
手机号 <input type="text" pattern="1[35678]\d{9}" name="num">
pattern 属性适用于以下 <input> 类型：text, search, url, telephone, email 以及 password 。

表格

对比列表

三行两列的一个表格
<table><tr> <td></td><td></td></tr><tr> <td></td><td></td></tr><tr> <td></td><td></td></tr>
</table>

####格式补充

标题 caption
表头 tr>th
表结构
thead 表格页眉
tbody 表主题
tfoot 表格页脚

案例

模拟课程表  6  行 9 列
使用工具快速生成
table>(tr>(td*9))*6
td中填写内容
table>(tr>(td{内容书写}*9))*6

常用属性

属性名	属性含义
border	边框单位是像素
bordercolor	边框颜色
cellspacing	两个单元格之间的距离,合并边框该属性设置为0
cellpadding	单元格与其内容之间的距离
width / height	宽高
align	设置在table 中表格位置, 设置在 tr 或td中内容的排版
bgcolor / background	背景颜色和图片
colspan	合并列
rowspan	合并行

课程表案例
6图形案例

iframe 内嵌框架

视频 <br>
<iframe src="4-音频.html" frameborder="0">
</iframe>

使用超链接在窗体上切换

图形 <br>
<iframe src="3-关于图形6.html" frameborder="0" name="abc" width="400px" height="400px"></iframe>
<a href="4-音频.html" target="abc">在内嵌框架上打开超链接</a>

frame 框架集窗口

<frameset cols="25%,50%,25%"><frame src="frame_a.htm" /><frame src="frame_b.htm" /><frame src="frame_c.htm" />
</frameset>

html 5 多媒体标签

音频

<audio controls="controls" src="洛天依-小鸡哔哔.mp3"> </audio><audio controls="controls"><source src="洛天依-小鸡哔哔.mp3" /><source src="洛天依-小鸡哔哔.mp3" />
</audio>

视频

<video src="D:\成长纪录片.mp4" controls="controls" autoplay></video>autoplay 自动播放src 指向磁盘上的文件路径

颜色表示法

颜色有三种表示法

英文表示

十六进制表示法

所有的颜色都是三原色组成红禄蓝

根据每种颜色的比例不同, 显示出不同的色彩,

把每种颜色浓淡使用数字描述 0 - 255

知道16进制 1-9 ABCDEF

(二进制 11111111) 换算成为 16进制 FF

rgb 表示法

rgb(255,0,0)

rgba 表示法

rgba(255,0,0,0.5)

0-1 之间表示的是颜色的透明度

使用软件获取屏幕上的任何颜色

前端笔记1 HTML基础相关推荐

3.前端笔记之JavaScript基础
作者:刘耀部分内容参考一下链接参考: http://www.cnblogs.com/wupeiqi/articles/5369773.htmlhttp://javascript.ruanyifen ...
前端笔记之CSS基础 - 字体和文本样式
目录 1.字体样式 1.1.字体大小 1.2.字体粗细 1.3.文字样式(是否倾斜) 1.4.字体 1.5.层叠性 1.6.字体font相关属性的连写 2.文本样式 2.1.文本缩进 2.2.文本水平 ...
前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
[前端笔记——HTML介绍] 4.HTML文本基础+超链接+高级文本格式
[前端笔记--HTML介绍] 4.HTML文本基础+超链接+高级文本格式 1.HTML文本基础 1.1标题和段落 1.2列表 1.2.1无序列表(unordered) 1.2.2有序列表(ordere ...
前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
菜鸟学习笔记：Java基础篇4（面向对象三大特征）
菜鸟学习笔记:Java面向对象篇中继承概念方法重写(override) Object类 Super关键字组合 final关键字补充封装访问控制符多态继承概念继续上一篇的例子: #m ...
菜鸟学习笔记：Java基础篇2（变量、运算符、流程控制语句、方法）
菜鸟学习笔记:Java基础篇2 变量基本概念变量作用域 final关键字运算符算术运算符比较运算符逻辑运算符位运算符赋值运算符条件运算符运算符优先级 Java三种流程控制语句顺序 ...
【Java 系列笔记】语法基础 + Spring + Spring MVC + SpringBoot + 数据结构
Java 强化笔记目录 Java 语言基础 Java 架构师体系课程一些课程前端笔记:前端学习笔记 Java 语言基础回头补基础(此基础非小白)系列,学校教的其实真的就是一些皮毛而已,怕是连门都 ...
Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...

前端笔记1 HTML基础