HTML+CSS复习之HTML基础篇

news/2025/6/19 16:48:05

一些说明

写在前面：HTML和CSS，当你了解所有规则后，你应该多写页面并记录你出现的问题，这才是学习HTML和CSS的最佳方法

这是我学习一段时间之后，再次回顾HTML，希望大家也对HTML有不一样的认识

我把HTML标签分成两大类，重要的和不重要的，希望大家都能从众多标签中解脱出来！！

本文的宗旨，简明扼要！最快入门 HTML (把我给出的代码不断地敲，并且适当加点个性化的东西，HTML标记语言你就入门了)

温故而知新

HTML，超文本标记语言（HyperText Markup Language）只是标记，没有任何逻辑，学习起来会很快的

结构如下：

这里写了可以出现在head内的所有标签
<!DOCTYPE html>  //HTML5的文档声明，现在都用这种方式了
<html>           //文档的根<head>           //文档的头部信息<meta charset="utf-8">     //表示该文档是以UTF-8编码的<title>菜鸟教程(runoob.com)</title>    //页面标题//为搜索引擎定义关键词:<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">//为网页定义描述内容:<meta name="description" content="Free Web tutorials on HTML and CSS">//定义网页作者:<meta name="author" content="Hege Refsnes">//每30秒中刷新当前页面:<meta http-equiv="refresh" content="30"><style>a{CSS样式}</style><link rel="stylesheet" type="text/css" href="xxx.css"><script>脚本</script><script type="text/javascript" src="xxxx.js"></script><noscript></noscript>//该标签作为HTML文档中所有的链接标签的默认链接:<base href="http://www.runoob.com/images/" target="_blank"></head><body>           //网页主题部分<h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>
关于文档声明：(了解即可，没什么作用)
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

tips:注释长啥样？<!-- html content-->

直击主题：HTML标签

来，我们来看看HTML的标签都有哪些

h1 ~ h6 , p , a , img , button , caption , dd , dl ,dt, ul ,li , fieldset , from , iframe , input , label , select , table td ,tr , tbody , tfoot , thead ，hr , html , body head title meta style script ,input , label , legend , div , span

基本上你只要看到这个标签，懂这个标签一般是怎么用的就OK了！

重点掌握的标签有（一些特别基础性的标签不在此之内）

超链接标签a：只要是a标签能包含啥，那个被包含的都是超链接

a的常用方法如下：

1、<a href = "http://xxxx.xxx" target="_blank">
2、电子邮件 <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
3、取消链接 <a href="javascript:void(0)">
4、锚点 <a href="#tips">可以链接到本页面id为tips的元素，用于页面内跳转
<a href="javascript:void(0)">hello</a>

<p>图像标签img:</p>

img[src,title,alt,width,height]
<img src="xxxx.png" width=300 height=200 title="pic" alt="person">
alt : 当图片无法加载时替代图片，一般都要写的
1、图片一个特殊用处(结合map,基本不用)<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><map name="planetmap"><area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"><area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"><area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"></map>

<p>表格</p>

一般我们写表格的时候，table>tr>td(th)，采用这三层结构

一个完整的表格结构是这样的<table><caption></caption><thead><tr><th></th>.....</tr></thead><tbody><tr><td></td>......</tr></tbody><tfoot><tr><td></td>......</tr></tfoot></table>

属性注意

<table border=0> //设置整个table的边框，外框和内框
<table cellpadding="10">  //相当于设置这个表格每个单元格的 padding 为 10px 
<table cellspacing="10">  //相当于设置这个表格每个单元格的 margin  为 10px
<th colspan="2"> // 这个单元格跨了两列 tr也可以用
<th rowspan="2"> //这个单元格跨了两行 tr也可以用

列表

有序列表

<ol><li></li><li></li>...
</ol>

无序列表

<ul><li></li><li></li>...
</ul>

无序列表和有序列表，可以更改前面的标记类型，但是不常用，采用图片或者iconfont居多，可以采用list-style-image：url("xxx.png) ；来设置，这个在CSS学习笔记中会详细说明

列表支持嵌套

自定义列表

dl   注意一个dl里面最好只有一个dt，行业潜规则 原意是解释名词，dt  一般一条信息，只解释一个名词,也就是一个dtdddddd
dl

div -- 最具有代表性的块级标签

通常用于布局，很常见的div+css布局，为什么采用div呢？因为div是一个容器元素，div内部可以包含很多标签，
div内部可以有div的
div是块级标签，注意，任何块级标签写在页面上，宽度都是占据父容器的百分之百，除非你设置块级元素的宽度，具体的怎么排版，请看这篇：HTML+CSS复习之CSS基础篇

span -- 最具有代表性的行级标签

span是一个行级标签，所谓行级标签的意思是，内容有多大，我在页面中占据的位置就有多大（内容+padding）

input --表单

表单的属性特别多，可以去W3C看一遍，这里就不详细讲了，毕竟是写个入门啦。表单主要用作数据传递，所以对表单的理解，就是要搞明白，表单的那些属性是怎么回事
一个表单完整书写

<form action="url" method="post/get" >//文本框<input name="username" type="text" />//密码框<input name="password" type="password" />//单选框（注意name要相同,是同一类行的选择，以便后台拿到数据）<input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female//多选框（注意name要相同,是同一类行的选择，以便后台拿到数据）<input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car //下拉框<select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select>//这种是为下拉框分组<select><optgroup label="Swedish Cars"><option value="volvo">Volvo</option><option value="saab">Saab</option></optgroup><optgroup label="German Cars"><option value="mercedes">Mercedes</option><option value="audi">Audi</option></optgroup></select>//文本域<textarea name="textarea" rows="10" cols="30">我是一个文本框。</textarea>//提交按钮，下面的提交按钮，默认提交到action地址<input type="submit" value="Submit"><button>submit</button>//这是另外一种形式的表单，注意其中的区别即可，//fieldset标签也只会在这种场合使用了<fieldset><legend>Personal information:</legend>Name: <input type="text" size="30"><br>E-mail: <input type="text" size="30"><br>Date of birth: <input type="text" size="10"></fieldset>//datalist标签，input的list属性绑定到datalist的id，就可以完成这项工作了<input list="browsers" name="browser"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist><input type="submit">//注意label标签 , 通过绑定input的id来实现在label出点击获取焦点，有两种写法<label for="name">用户名</label>    <input id="naem" type="text" size="30"><label>Hello<input type="text" size="30"></label>
</form>

实例如下：

<label for="name">用户名  </label><input id="name" type="text" size="30">    <label>Hello  <input type="text" size="30"></label>

注意: Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。

output标签，顾名思义，输出标签，那么从何处输入，定义规则是怎么样的呢？

form定义规则 ，那么你可不可以写一个升级版的呢？

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="50">100  //数据源+<input type="number" id="b" value="50">   //数据源=<output name="x" for="a b"></output>      //计算出结果
</form>

iframe --一般重要的标签

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe>
iframe显示的地址页面内容，制定高度和宽度，frameborder移除边框

用iframe来显示页面内部链接

<iframe src="www.baidu.com" name="iframe_a"></iframe>
<p><a href="http://www.google.com" target="iframe_a">Google</a></p>

全局属性

这些属性，基本上不怎么使用，了解即可。
accesskey 规定激活元素的快捷键。
一下元素支持accesskey属性

<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。
<a href="http://www.w3school.com.cn/html/" accesskey="h">HTML</a>
<a href="http://www.w3school.com.cn/css/" accesskey="c">CSS</a>

例子：
HTML 、 CSS

  • class 规定元素的一个或多个类名（引用样式表中的类）。

  • contenteditable 规定元素内容是否可编辑。

  • contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。

  • data-* 用于存储页面或应用程序的私有定制数据。

  • dir 规定元素中内容的文本方向。

  • draggable 规定元素是否可拖动。

  • dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。

  • hidden 规定元素仍未或不再相关。

  • id 规定元素的唯一 id。

  • lang 规定元素内容的语言。

  • spellcheck 规定是否对元素进行拼写和语法检查。

  • style 规定元素的行内 CSS 样式。

  • tabindex 规定元素的 tab 键次序。

  • title 规定有关元素的额外信息。

  • translate 规定是否应该翻译元素内容。

空元素标签

br , hr

HTML5标签

article, aside , audio , bdi , canvas , datalist , command , details ,dialog , embed ,figcaption ,figure ,footer ,header , keygen , mark , meter , nav , output , process , rp ,rt , ruby , section , source , summary , time , track , video , wbr

这些都是html5的标签，一眼便能看出，更加语义化了，如果想看html5标签详解，请看这里:[HTML+CSS复习之HTML5基础篇]()

不重要的标签

b（定义文本粗体） , i（定义文本斜体） , strong , em , big ,small , sub , sup , ins , del , pre , code , kbd , tt , samp , var , address(定义文档作者或拥有者的联系信息) , abbr(定义缩写) , acronym（定义只取首字母的缩写，不支持HTML5） , bdo , blockquote , q , cite , dfn , colgroup , col , center, font , dir(与ul差不多，兼容性不如ul) , frame/frameset(这两个标签已经没人用了，主要是用了这个标签，交互就做不了)

<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />
<b>注释：</b>这些标签常用于显示计算机/编程代码。
<acronym title="World Wide Web">WWW</acronym>
<bdo dir="rtl">该段落文字从右到左显示。</bdo>

标签嵌套规则

a标签不能嵌套a标签，p标签不能嵌套块级标签


https://dhexx.cn/news/show-2635979.html

相关文章

支持向量机——问的最多的机器学习算法之一，核函数

支持向量机——问的最多的机器学习算法之一，核函数

问的最多的机器学习算法之一 得看看别的 分别取正负1&#xff0c;所以恒大于零 暂时留个坑&#xff0c;先去学点别的&#xff0c;过几天时间再填
阅读更多...
Docker - 访问容器

Docker - 访问容器

容器具有自己的内部网络和ip地址&#xff0c;具体信息可以查看docker inspect命令结果的"NetworkSettings"部分。 如果想要从外部访问容器中的应用&#xff0c;可以通过docker run命令的-P或-p参数来指定端口映射。 可以通过docker port命令或者docker ps命令结果的P…
阅读更多...
PyTorch学习笔记(14) ——PyTorch 1.0 的C++ FrontEnd初体验

PyTorch学习笔记(14) ——PyTorch 1.0 的C++ FrontEnd初体验

在去年12月份,我尝试了一下PyTorch 1.0的C前端, 当时官方负责PyTorch的C前端的老哥是: Peter Goldsborough, 当时的C前端还不够稳定,官方文档提供的demo无法跑通. 所以为了避免后面的同学再次入坑. 本部分将会手把手教你如何用PyTorch1.0 跑通C Mnist模型的训练~ 0. PyTorch C接…
阅读更多...
Apache相关安全设置

Apache相关安全设置

刚刚安装完Apache2.2和php 5.2.14后&#xff0c;配置完成首次用httpd启动时出现Apache 2 Test Page&#xff0c;并有如下提示&#xff1a;此问题的解决办法是&#xff1a;1. 找到一个叫做welcome.conf的文件&#xff0c;一般在/etc/httpd/conf.d2. 把这个文件的所有行都注释掉&…
阅读更多...
torch.set_grad_enabled(False)

torch.set_grad_enabled(False)

volatile是用来在验证或者测试的时候将输入设置成volatile&#xff0c;这样后继几点全部都被设置成volatile&#xff0c;也就是不需要自动求导。 0.4.0以后采用torch.set_grad_enabled()来替代这种用法 但是torch.set_grad_enabled()在使用的时候是设置一个上下文环境&#x…
阅读更多...
人脸检测 51cto课程代码 学习记录

人脸检测 51cto课程代码 学习记录

唐宇迪的课程学习代码笔记记录 https://nbviewer.jupyter.org/github/nightsswatch/MLProject/blob/master/%E4%BA%BA%E8%84%B8%E6%A3%80%E6%B5%8B/face_detect.ipynb https://github.com/nightsswatch/MLProject/blob/master/%E4%BA%BA%E8%84%B8%E6%A3%80%E6%B5%8B/face_det…
阅读更多...
NSDate 类的总结,全面基础

NSDate 类的总结,全面基础

<span style"font-size:24px;"><span style"font-size:18px;">//1.创建日期对象//创建的NSDate对象,获得的永远是0时区时间,假设要是求东八区时间,就加8个小时NSDate *date [NSDate date];NSLog("%",date);//创建明天此时的日期(时…
阅读更多...
最新云服务厂商产品列表---截至20141016

最新云服务厂商产品列表---截至20141016

这是我近期整理的一份公有云服务商&#xff1a;阿里云、腾讯云、天翼云、ucloud、和华为云的产品列表&#xff0c;供有需要的朋友使用。我还在整理各公有云服务商的服务对比&#xff0c;有时间放出。转载于:https://blog.51cto.com/bendchen/1566088
阅读更多...
Easy sssp（spfa）（负环）

Easy sssp（spfa）（负环）

vijos 1053 Easy sssp 方法&#xff1a;用spfa判断是否存在负环 描述 输入数据给出一个有N(2 < N < 1,000)个节点&#xff0c;M(M < 100,000)条边的带权有向图. 要求你写一个程序, 判断这个有向图中是否存在负权回路. 如果从一个点沿着某条路径出发, 又回到了自…
阅读更多...
PyTorch学习笔记(16)——编写你自己的PyTorch kernel(基于PyTorch1.2.0)

PyTorch学习笔记(16)——编写你自己的PyTorch kernel(基于PyTorch1.2.0)

在前一阵看过PyTorch官方核心开发者Edward Z, Yang的在纽约举办的PyTorch NYC Meetup的关于PyTorch内部机制的讲解。从通过strides指定逻辑布局&#xff0c;tensor wrapper到autograd机制以及对PyTorch内部最重要的几个基本代码模块的扼要说明&#xff0c;让人受益匪浅。其中&a…
阅读更多...
最新文章

Copyright @ 2022~2023