admin管理员组文章数量:1794759
HTML与CSS详细介绍与基本语法
HTML学习
HTML学习- HTML学习
- HTML简介
- 什么是 HTML？
- HTML 标签
- HTML 文档 = 网页
- HTML元素
- HTML 元素语法
- HTML 空元素
- HTML 提示：使用小写标签
- HTML标签
- HTML 标题
- 标题很重要
- 文本标签
- HTML 水平线
- HTML 注释
- HTML中的特殊字符
- HTML中的列表标签
- HTML中的块标签（div和span）CSS中重点使用
- HTML中的表格标签
- HTML中的表单标签
- CSS学习
- CSS的简介
- CSS与HTML的结合方式
- CSS使用方法
- CSS语法
- CSS选择器
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如 和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
HTML的一个元素包括开始标签和结束标签：开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）
HTML 元素语法- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
< br >就是没有关闭标签的空元素（< br > 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 < br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 < br > 在所有浏览器中都是有效的，但使用 < br /> 其实是更长远的保障。
HTML 提示：使用小写标签HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
HTML标签 HTML 标题标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
标题很重要请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
文本标签 释：<!-- 注释内容 --> <h1> to <h6>：标题标签 1~h6:字体大小逐渐递减 <p>：段落标签 <br>：换行标签 <hr>：展示一条水平线 属性： color：颜色 width：宽度 size：高度 align：对其方式 center：居中 left：左对齐 right：右对齐 <b>：字体加粗 <i>：字体斜体 <font>:字体标签 <center>:文本居中 属性： color：颜色 size：大小 face：字体 属性定义： color： 1. 英文单词：red,green,blue 2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255) 3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF width： 1. 数值：width='20' ,数值的单位，默认是 px(像素) 2. 数值%：占比相对于父元素的比例 HTML 水平线<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
HTML 注释可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释写法如下:
HTML中的特殊字符当需要使用符号时查看w3c文档即可！！！
HTML中的列表标签表格标签包括<table>标签，<tr>标签，<td>标签，<th>标签，<caption>标签
其中<table>标签的属性有
<tr>标签用来定义表格的行
<td>标签：定义表格单元
< form>标签：用于定义一个范围，范围代表采集用户数据的范围。
属性：
- get：
- 请求参数会显示在地址栏中
- 参数长度有限制
- 不太安全
- post： * 请求参数不会在地址栏中，会封装在请求体中 * 参数长度无限制 * 较为安全
标签：可以通过type属性值，改变元素展示的样式
-
type属性：
-
text：文本输入框，默认值
- placeholder：指定输入框的提示信，当输入框的内容发生变化，会自动清空提示信
-
password：密码输入框
-
radio:单选框
-
注意：
-
要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
-
一般会给每一个单选框提供value属性，指定其被选中后提交的值
-
checked属性，可以指定默认值
- checkbox：复选框 * 注意： 1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 2. checked属性，可以指定默认值
- file：文件选择框
- hidden：隐藏域，用于提交一些信。
- 按钮：
- submit：提交按钮。可以提交表单
- button：普通按钮
- image：图片提交按钮
- src属性指定图片的路径
-
-
label：指定输入项的文字描述信
- 注意：
- label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
- 注意：
-
select: 下拉列表
- 子元素：option，指定列表项
-
textarea：文本域
- cols：指定列数，每一行有多少个字符
- rows：默认多少行。
-
CSS（Cascading Style Sheets）层叠样式表
CSS与HTML的结合方式内联样式
如 <div style="color: red">hello world</div>
内部样式
在<head>标签内，定义<style>标签，<style>标签的标签体内就是CSS代码。
外部样式
- 注意
- 1，2，3 种方式，CSS作用范围越来越大
- 1方式不常用，2，3更常用。
- 分类：
- 基础选择器
- id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
- 语法：#id属性值{}
- 元素选择器：选择具有相同标签名称的元素
- 语法： 标签名称{}
- 注意：id选择器优先级高于元素选择器
- 类选择器：选择具有相同的class属性值的元素。
- 语法：.class属性值{}
- 注意：类选择器选择器优先级高于元素选择器
选择所有元素：
- 语法： *{}
并集选择器：
- 选择器1,选择器2{}
子选择器：筛选选择器1元素下的选择器2元素
- 语法： 选择器1 选择器2{}
父选择器：筛选选择器2的父元素选择器1
- 语法： 选择器1 > 选择器2{}
属性选择器：选择元素名称，属性名=属性值的元素
- 语法： 元素名称[属性名=“属性值”]{}
伪类选择器：选择一些元素具有的状态
- 语法： 元素:状态{}
- 如：
- 状态：
- link：初始化的状态
- visited：被访问过的状态
- active：正在访问状态
- hover：鼠标悬浮状态
- 状态：
如果遇到具体问题可以访问W3Cschool进行学习。 感谢您的阅读，如果本篇文章对您有帮助，欢迎点赞，关注，您的阅读是我莫大的鼓励！
版权声明：本文标题：HTML与CSS详细介绍与基本语法 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686968931a123621.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论