Htmlcss学习笔记1——html基础
Hyper text markup language 超文本标签语言。不是一种编程语言，而是一种标记语言标记语言是一套标记标签
开发工具
- chrome
- subline
- vscode
- photoshop
浏览器内核
| IE内核 | Trident |
|---|---|
| Firefox | Gecko |
| Safari苹果浏览器 | Webkit |
| Chrome | Chromium/blink |
| Operapresto | presto |
html骨架
- HTML标签：所有html标签中的根节点
- Head标签：文档头部，描述文档的各种属性和信息。包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。如<！DOCTYPE>声明了htm版本为html5版本
- Title标签：文档的标题
- Body标签：文档的主体，素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
html标签分类
html标签分类分为双标签和单标签，双标签具有嵌套关系、并列关系，如<div></div>；单标签有：<input/>、<img/>
html标签
特殊
<link>：定义文档与外部资源的关系，最常见的用途是链接样式表<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
属性
charset——html5不支持hrefurl ——规定被链接文档的位置hreflanglanguage_code——规定被链接文档中文本的语言medimedia_query——规定被链接文档将被显示在什么设备上relalternate\author\help\icon\licence\next\pingback\ prefetch\prev\search\sidebar\stylesheet\tag——规定当前文档与被链接文档之间的关系typeMIME_type——规定被链接文档的 MIME 类型
<meta>：定义了与文档相关联的名称/值对。提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部<meta name="keywords" content="HTML,ASP,PHP,SQL">
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
//这样发送到浏览器的头部就应该包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
属性
*contentsome_text——定义与 http-equiv 或 name 属性相关的元信息http-equivcontent-type\expires\refresh\set-cookie ——把 content 属性关联到 HTTP 头部。当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档nameauthor\description\keywords\generator \revised\others——把 content 属性关联到一个名称。比如"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。schemesome_text——定义用于翻译 content 属性值的格式
排版标签
| 名称 | 语义 | 例子 |
|---|---|---|
| 标题标签 | head | <h1></h1>，<h2></h2>..<h6></h6> |
| 段落标签 | paragraph | <p></p> |
| 水平线标签 | horizon | <hr/> |
| 换行标签 | break | <br/> |
| div标签 | <div> </div> |
|
| span标签 | <span></span> |
文本格式化标签
| 名称 | 语义 | 例子 |
|---|---|---|
| 粗体 | strong | <b></b> <strong></strong> |
| 斜体 | <i></i> <em></em> |
|
| 加删除线 | delete | <s></s> <delb</del> |
| 下划线 | underline | <u></u> <ins></ins> |
图像标签img
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | url | 图像路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素（XHTML不支持%页面百分比） | 图像宽度 |
| height | 像素（XHTML不支持%页面百分比） | 图像高度 |
| border | 数字 | 图像边框宽度 |
链接标签a
| 属性 | 属性值 | 描述 |
|---|---|---|
| href | Url | 用于指定链接目标的url地址，Hypertext Reference的缩写。意思是超文本引用 |
| target | self_blank | 用于指定链接页面的打开方式，其中self为默认值，blank为在新窗口中打开方式。 |
herf
1. 外部链接 需要添加 `http://`
2. 内部链接 直接链接内部页面名称即可 比如 `< a href="index.html"/>`
3. 空连接 `href="#"`
4. 锚点定位
——本页面跳转
1. 给想要跳转的标签添加id名
2. 点击可跳转id名标签所在位置<a href="#id名></a>
——跳转到其他页面的锚点
1. <a id="test">锚</a>
2. <a href="test2.html#test"></a>
特殊字符标签
列表标签
| 类别 | 描述 |
|---|---|
| 无序列表 | 各个列表项之间没有顺序级别之分，是并列的 |
| 有序标签 | 有排列顺序的列表，其各个列表项按照一定的顺序排列定义 |
| 自定义列表 | 定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。 |
//无序
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
//有序
<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>
注意：
1. <ul>中只能嵌套<li>直接在<ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性
表格标签
| 类别 | 描述 | 语法 |
|---|---|---|
| 表头标签 | 表头一般位于表格的第一行或第一列，其文本加粗居中。 用表头标签替代相应的单元格标签 | <tr> </tr> <th><th/> |
| 表头标题 | caption 元素定义表格标题。 | <caption></caption> |
| 表格结构 | 表格可划分为头部、主体和页脚 <thead></thead>用于定义表格的头部。必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。 <tbody></tbody>用于定义表格的主体。 位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。 |
<thead><thead/> <tbody><tbody> |
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<tr>
<th>表头<th/>
</tr>
<table>
<caption>表格标题</caption>
</table>
<table>
<thead><thead/>
<tbody><tbody>
<table/>
| 属性名 | 属性值 | 含义 |
|---|---|---|
| border | 设置表格的边框（默认border=“0”无边框） | 像素值 |
| cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值（默认为2像素） |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值（默认为1像素） |
| width | 设置表格的宽度 | 像素值 |
| aline | 设置表格在网页中的水平对齐方式 | left、center、right |
| rowspan | 数字 | 跨行合并单元格 |
| colspan | 数字 | 跨列合并但管个 |
表单标签
| 类别 | 属性 | 属性值 | 描述 |
|---|---|---|---|
| input | type | text | 单行文本输入框 |
| password | 密码输入框 | ||
| radio | 单选按钮 | ||
| checkbox | 复选框 | ||
| button | 普通按钮 | ||
| submit | 提交按钮 | ||
| image | 图像形式的提交按钮 | ||
| file | 文件 | ||
| name | 由用户自定义 | 控件的名称 | |
| value | 由用户自定义 | input控件中的默认文本值 | |
| size | 正整数 | input控件在页面中的显示宽度 | |
| checked | checked | 定义选择控件默认被选中的项 | |
| maxlength | 正整数 | 控件允许输入的最多字符数 | |
| label | - | - | label 标签为 input 元素定义标注（标签）。 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点 |
| textarea | |||
| select | 下拉菜单，至少包含一对<option></option>; 在option中定义selected="selected“时，当前项即为默认选中项 |
||
| form | action | url地址 | |
| method | Get/post | ||
| name | 用于指定表单的名称，以区分同一个页面中的多个表单。 |
//label
<form>
<label for="male"</label>
<input id="male" />
</form>
//文本域
<textarea cols="每行字符数" rows="行数"></textarea>
//下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
路径
| 类别 | 描述 |
|---|---|
| 相对路径 | 以网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。 |
| 绝对路径 | 绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的 |
- 图像文件和HTML文件位于同一文件夹：
<img src="logo.gif"/> - 图像文件位于HTML文件的下一级文件夹：
<img src="img/img01/logo.gif" /> - 图像文件位于HTML文件的上一级文件夹：
<img src="../logo.gif" /> D:\web\img\logo.gifhttp://www.itcast.cn/images/logo.gif
Htmlcss学习笔记1——html基础的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Java学习笔记：语言基础
Java学习笔记:语言基础 2014-1-31 最近开始学习Java,目的倒不在于想深入的掌握Java开发,而是想了解Java的基本语法,可以阅读Java源代码,从而拓展一些知识面.同时为学习An ...
- 卷积神经网络(CNN)学习笔记1：基础入门
卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01 | In Machine Learning | 9 Comments | 14935 Vie ...
- 「学习笔记」字符串基础：Hash，KMP与Trie
「学习笔记」字符串基础:Hash,KMP与Trie 点击查看目录 目录 「学习笔记」字符串基础:Hash,KMP与Trie Hash 算法 代码 KMP 算法 前置知识:\(\text{Border} ...
- 【学习笔记】Linux基础（零）：预备知识
学习笔记(连载)之Linux系列 Note:本学习笔记源自<鸟哥的Linux私房菜(基础学习篇)>一书,为此书重要内容的摘要和总结,对于一些常识性的知识不再归纳 新型冠状病毒引发的肺炎战& ...
- 【JAVAWEB学习笔记】06_jQuery基础
接05的学习笔记. 四.使用JQ完成省市二级联动 1.需求分析 使用jquery完成省市二级联动 2.技术分析 2.1数组的遍历操作 方式一: $(function(){ // 全选/ 全不选 $(& ...
- ios开发学习笔记001-C语言基础知识
先来学习一下C语言基础知识,总结如下: 在xcode下编写代码. 1.编写代码 2.编译:cc –c 文件名.c 编译成功会生成一个 .o的目标文件 3.链接:把目标文件.o和系统自带的库合并在一起, ...
- HTML学习笔记之标签基础
目录 1.基本标签 2.链接 3.图像 4.表格 5.列表 6.块与布局 1.基本标签 (1)标题与段落 标签 <h1> ~ <h6> 分别用于定义一至六级标题,标签 < ...
- Java学习笔记之—Java基础
将学习到的JAVA基础用xmind记录了下来,需要原件的可以私信
随机推荐
- linux之DNS主域,从域,缓存服务器的架设
DNS主域,从域,缓存服务器的架设 DNS域名系统 组织域 顶级域 域名解析过程迭代递归 DNS(Domain Name System ) 在Internet中使用IP地址来确定计算机的地址. 为了 ...
- [转] Java Agent使用详解
以下文章来源于古时的风筝 ,作者古时的风筝 我们平时写 Java Agent 的机会确实不多,也可以说几乎用不着.但其实我们一直在用它,而且接触的机会非常多.下面这些技术都使用了 Java Agent ...
- Caffe CuDNN版本与环境不同导致make错误
1.将./include/caffe/util/cudnn.hpp 换成最新版的caffe里的cudnn的实现,即相应的cudnn.hpp. 2.将./include/caffe/layers里的,所 ...
- 简单的 Nginx+Tomcat 配置负载均衡集群
简单 Nginx+Tomcat 配置负载均衡集群 前期准备 解压两个tomcat,修改端口号 server1:8081 server:8082 同时启动 nginx官网下载解压版nginx 创建一个简 ...
- 002_centos7关闭防火墙
防火墙是比较烦人的,在自己做实验,或者实际应用中,如果配置不好的话,会出现各种匪夷所思的问题,那么如何关闭呢 在centos7里,防火墙改为了firewalld进程 首先用命令firewall-cmd ...
- Springboot使用Shiro-整合Redis作为缓存 解决定时刷新问题
说在前面 (原文链接: https://blog.csdn.net/qq_34021712/article/details/80774649)本来的整合过程是顺着博客的顺序来的,越往下,集成的越多,由 ...
- centos 8 安装和网络配置
centos 8 系统安装 系统安装步骤 启动服务器之后选择 Install CentOs Linux 8 选择语言然后下一步 配置 磁盘(Installation Destir) 这里选择默认配置 ...
- Java入门到实践系列(2)——Java环境搭建
一.上集回顾 在<Java入门到实践系列(1)--Java简介>中提到过,Java程序是运行在Java虚拟机的,也展示过下面这张图. JDK:Java程序开发工具包. JRE:Java运行 ...
- Java 字符流
字符编码表:其实就是生活中字符和计算机二进制的对应关系表. 1.ascii: 一个字节中的7位就可以表示.对应的字节都是正数.0-xxxxxxx 2.iso-8859-1:拉丁码表 latin,用了一 ...
- C#LeetCode刷题之#896-单调数列（Monotonic Array）
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3760 访问. 如果数组是单调递增或单调递减的,那么它是单调的. ...