HTML & CSS 知识点梳理（内涵大量Demo噢~）

最新推荐文章于 2022-03-16 15:58:02 发布
最新推荐文章于 2022-03-16 15:58:02 发布
阅读量275 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaLiweipeng/article/details/82948460
版权

参考文献《JavaWeb 从入门到精通》

1.HTML的文档结构

1.<html>标记
<html>标记是HTML文件的开头。所有HTML文件都是以<html>标记开头，以</html>标记结束,HTML页面的所有标记都要放置在<html>与</html>标记中，<html>标记并没有实质性的功能，但却是HTML文件不可缺少的内容。
另外，HTML标记是不区分大小写的。

2.<head>标记
文件的头标记，放置HTML文件的信息，
如：

- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <script>

3.<title>标记
定义网页页面的标题。

4.<body>标记
HTML页面的主题标记。

2.HTML的常用标记

1.换行标记
demo：

<html>  
  <head>
     <title>应用换行标记实现页面文字换行</title>
  </head>
  <body>
     <b>
       黄鹤楼送孟浩然之广陵
     </b><br>
       故人西辞黄鹤楼，烟花三月下扬州。<br>
       孤帆远影碧空尽，唯见长江天际流
  </body>
</html>

运行结果如图：


9125154-1df1c534bd35619a.png



2.段落标记
<p>开头，</p>标记结束。段落标记在段前段各添加一个空行，而定义在段落标记中的内容不受该标记的影响。

3.标题标记
<h1>~<h6>6个标题标记，分为6级标题。
demo：

<html>
    <head>
    <title>设置标题标记</title>
    </head>
    <body>
    <h1>Java开发的3个方向</h1>
    <h2>Java SE</h2>
    <p>主要用于桌面程序的开发。它是学习Java EE和Java ME的基础，也是本书的重点内容。 </p>
    <h2>Java EE</h2>
    <p>主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用Java语言来开发自 己的官方网站，其中不乏世界500强企业。</p>
    <h2>Java ME</h2>
    <p>主要用于嵌入式系统程序的开发。</p>  
   </body>
</html>

运行结果如图：

9125154-3f645b00897395a3.png
image.png

4.居中标记

<center></center>。标记中的内容为居中显示。
demo:

<html>
    <head>
    <title>设置标题标记</title>
    </head>
    <body>
    <center>
    <h1>java开发的3个方向</h1>
    <h2>Java SE</h2>    
    <p>主要用于桌面程序的开发。它是学习Java EE和Java ME 的基础，也是本书的重点内容。</p>   
    <h2>Java EE</h2>
    <p>主要用于网页程序的开发。随着互联网的发展，越来越 多的企业使用Java语言来开发自己的官方网站，其中不乏世界500强企业。</p>
    <h2>Java ME</h2>
    <p>主要用于嵌入式系统程序的开发。</p>  
    </center>
   </body>
</html>

运行结果如图：

9125154-be99b2a58a7d9a76.png
image.png

5.文字列表标记
1）无序列表：<ul><li>
demo:

<html>
    <head>
    <title>无序列表标记</title>
    </head>
    <body>
    编程词典有以下几个品种
    <p>
    <ul>
      <li>Java编程词典
      <li>VB编程词典
      <li>VC编程词典
      <li>.net编程词典
      <li>C#编程词典
    </ul>
   </body>
</html>

运行结果如图：

9125154-dd75f8d847782cc5.png
image.png

1）有序列表：<ol><li>
demo:

<html>
    <head>
    <title>有序列表标记</title>
    </head>
    <body>
    编程词典有以下几个品种
    <p>
    <ol>
      <li>Java编程词典
      <li>VB编程词典
      <li>VC编程词典
      <li>.net编程词典
      <li>C#编程词典
    </ol>
   </body>
</html>

运行结果如图：

9125154-dba8582fc1ea39d4.png
image.png

3.HTML表格标记

9125154-aa201d46721ec4e2.png
image.png

demo:

<body>
<table width="318" height="167" border="1" align="center">
  <caption>学生考试成绩单</caption>
  <tr>
    <td align="center" valign="middle">姓名</td>
    <td align="center" valign="middle">语文</td>
    <td align="center" valign="middle">数学</td>
    <td align="center" valign="middle">英语</td>
  </tr>
  <tr>
    <td align="center" valign="middle">张三</td>
    <td align="center" valign="middle">89</td>
    <td align="center" valign="middle">92</td>
    <td align="center" valign="middle">87</td>
  </tr>
  <tr>
    <td align="center" valign="middle">李四</td>
    <td align="center" valign="middle">93</td>
    <td align="center" valign="middle">86</td>
    <td align="center" valign="middle">80</td>
  </tr>
  <tr>
    <td align="center" valign="middle">王五</td>
    <td align="center" valign="middle">85</td>
    <td align="center" valign="middle">86</td>
    <td align="center" valign="middle">90</td>
  </tr>
</table>
</body>

运行结果如图：

9125154-99133203e793d836.png
image.png

4.HTML表单标记

对于经常上网的人来说，对网站中的登录等页面肯定不会感到陌生。在登录页面中，网站会提供
给用户用户名文本框与密码文本框，以供访客输入信息。这里的用户名文本框与密码文本框就属于
HTML中的表单元素。表单在HTML页面中起着非常重要的作用，是用户与网页交互信息的重要手段。

1.<form>...</form>表单标记

基本语法如下：

<form action = "url" method = "get"|"post" name = "name" onSubmit = "" target = "">
</form>
9125154-3d4b7af628564104.png

9125154-a03ee08f646c2817.png
2.<input>表单输入标记

表单输入标记是使用最频繁的表单标记，通过这个标记可以向页面中添加单行文本、多行文本、
按钮等。
基本语法如下：

<input type="image" disabled = "disabled" checked="checked" width="digit" height="digit“ maxlength=”digit"
readonly="" size="digit" src="uri" alt="" name="checkbox" value="checkbox">
9125154-1ec4daa7c562762f.png

9125154-9fbf82ff5a2ee5a2.png

demo:

<html>
<head>
<title>&lt;input&gt;标记的典型应用</title>
</head>
<body><form action="" method="post" name="myform">
<table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="images/01.gif" width="694" height="168"></td>
  </tr>
</table>
  <table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="103" height="231" valign="top"><img src="images/02.gif" width="35"></td>
      <td width="547" valign="top"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="17%" height="29" align="center">用 户 名：</td>
            <td colspan="2"><input name="username" type="text" id="UserName4" maxlength="20"></td>
          </tr>
          <tr>
            <td height="28" align="center">密&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
            <td height="28" colspan="2"><input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"></td>
          </tr>
          <tr>
            <td height="28" align="center">确认密码：</td>
            <td height="28" colspan="2"><input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"></td>
          </tr>
          <tr>
            <td height="28" align="center">性&nbsp;&nbsp;&nbsp;&nbsp;别：</td>
            <td colspan="2"><input name="sex" type="radio" class="noborder" value="男" checked>
              男&nbsp;
              <input name="sex" type="radio" class="noborder" value="女">
              女</td>
          </tr>
          <tr>
            <td height="28" align="center">爱&nbsp;&nbsp;&nbsp;&nbsp;好：</td>
            <td colspan="2" class="word_grey"><input name="like" type="checkbox" id="like" value="体育">              
            体育
            <input name="like" type="checkbox" id="like" value="旅游">
            旅游
            <input name="like" type="checkbox" id="like" value="听音乐">
            听音乐
            <input name="like" type="checkbox" id="like" value="看书">
            看书</td>
          </tr>

          <tr>
            <td height="28" align="center" style="padding-left:10px">E-mail：</td>
            <td colspan="2" class="word_grey"><input name="email" type="text" id="PWD224" size="50">            </td>
          </tr>
          <tr>
            <td height="34">&nbsp;</td>
            <td width="30%" class="word_grey"><input name="Submit" type="submit" class="btn_grey" value="确定保存">
            <input name="Reset" type="reset" class="btn_grey" id="Reset" value="重新填写"></td>
            <td width="53%" class="word_grey"><input type="image" name="imageField" src="images/btn_bg.jpg"></td>
          </tr>
      </table></td>
      <td width="44" valign="top"><img src="images/04.gif" width="44"></td>
    </tr>
  </table>
</form>
</body>
</html>

Demo中的图片资源我放在码云上面了，链接在这里，点击前往；

3.<select>...</select>下拉列表框标记

<select>标记可在页面中创建下拉列表框，此时的下拉列表框是一个空的列表，要使用<option>
标记向列表中添加内容。
<select>标记的语法格式如下：

<select name="name" size="digit" multiple="multiple" disabled="disabled">
</select>
9125154-cdb64a3c88d93472.png
image.png

demo:

<html>
<head>
<title>select标签Demo</title>
</head>
<body>
<center>
下拉列表框：
<select name="select">
    <option>数码相机区</option>
    <option>摄影器材</option>
    <option>MP3/MP4/MP5</option>
    <option>U盘/移动硬盘</option>
</select>
&nbsp;多行列表框（不可多选）：
<select name="select2" size=2>
    <option>数码相机区</option>
    <option>摄影器材</option>
    <option>MP3/MP4/MP5</option>
    <option>U盘/移动硬盘</option>
</select>
&nbsp;多行列表框（可多选）：
<select name="select3" size=3 multiple>
    <option>数码相机区</option>
    <option>摄影器材</option>
    <option>MP3/MP4/MP5</option>
    <option>U盘/移动硬盘</option>
</select>
</center>
</body>
</html>

运行结果：

9125154-2b33ffb60d773b2b.png
image.png

CSS样式表

1. CSS规则
选择符{属性：属性值；}
9125154-7c7892d21b3ea897.png
image.png
2. CSS选择器
1.标记选择器

demo：

<style>
    a{
          font-size:9px;
          color:#F93;
    }
</style>
2.类别选择器

"."配合“class"属性

demo：

<!--以下为定义的CSS样式-->
<style> 
   .one{                            <!--定义类名为one的类别选择器-->
        font-family:宋体;             <!--设置字体-->
        font-size:24px;             <!--设置字体大小-->
        color:red;                  <!--设置字体颜色-->
      }
    .two{
        font-family:宋体;
        font-size:16px;
        color:red; 
      }
    .three{
        font-family:宋体;
        font-size:12px;
        color:red; 
      }
</style>
</head>
<body>
   <h2 class="one"> 应用了选择器one </h2><!--定义样式后页面会自动加载样式-->
   <p> 正文内容1     </p>
    <h2 class="two">应用了选择器two</h2>
   <p>正文内容2 </p>
   <h2 class="three">应用了选择器three </h2>
   <p>正文内容3 </p>
</body>

运行结果如下：

9125154-1468a8e9415187e2.png
image.png

3.id选择器

"#"配合“id"属性

demo：

<head>
<style> 
   #one{                            
        font-family:宋体;             
        font-size:36px;             
        color:red;                  
      }
    #two{
        font-family:宋体;
        font-size:16px;
        color:red; 
      }
    #three{
        font-family:宋体;
        font-size:12px;
        color:red; 
      }
</style>
</head>
<body>
   
   <p id = "one"> id选择器1</p>
    
   <p id = "two">id选择器2 </p>
   
   <p id = "three">id选择器3 </p>
</body>

运行结果如下：

9125154-4d6e94bcddd449a9.png
image.png

4.CSS2和CSS3的自适应特性比较

demo(CSS2)：

<title>使用CSS2对页面中的文字添加彩色边框</title>
<style>
#boarder {
    margin:3px;
    width:180px;    
    padding-left:14px;
    border-width:5px;
    border-color:blue;
    border-style:solid;
    height:104px;
}
</style>
</head>
<body>
<div id="boarder"> 文字一<br>
  文字二<br>
  文字三<br>
  文字四<br>
  文字五<br>  
  文字二<br>
  文字三<br>
  文字四<br>
  文字五<br>
</div> 
</body>

demo(CSS3)：

<style>
#boarder {  
    border:solid 5px blue;
    border-radius:20px;
    -moz-border-radius:20px;    
    padding:20px;
    width:180px;    
}
</style>
</head>
<body>
<div id="boarder"> 文字一<br>
  文字二<br>
  文字三<br>
  文字四<br>
  文字五<br>
  文字二<br>
  文字三<br>
  文字四<br>
  文字五<br>
</div>
</body>

运行结果如下：

9125154-877695feca9346c4.png
CSS2（左）&CSS3 (右)
凌川江雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
HTML——input标记的典型应用（制作简单信息表单）
流楚丶格念的博客
05-16 4057
web这块的知识整理只能上图了 因为要不中间代码会在打开的网页上自动运行 看不见代码根本 HTML文档结构 算了 知识不整理 了 看书吧 Javaweb 从入门到精通 运行图： 代码如下： <html> <head> <title>&lt;input&gt;标记的典型应用</title> </head> <body><form action="" method="post" name="myfor
html css的参考文献,HTML & CSS 知识点梳理（内涵大量Demo噢~）
weixin_29193359的博客
06-18 2273
参考文献《JavaWeb 从入门到精通》另推相关博文一则1.HTML的文档结构1.标记标记是HTML文件的开头。所有HTML文件都是以标记开头，以标记结束,HTML页面的所有标记都要放置在与标记中，标记并没有实质性的功能，但却是HTML文件不可缺少的内容。另外，HTML标记是不区分大小写的。2.标记文件的头标记，放置HTML文件的信息，如：- - - 3.标记定义网页页面的标题。4.标记HTML页...
HTML语言标记详解
热门推荐
青梅煮酒
10-20 1万+
    开发过Android的同学都知道，Android应用程序中的界面是由一个个控件组合而成的，比如说按钮控件，图片控件，文本输入框控件等。HTML语言的标记就可以理解成控件的标记，一个标记指定了一个控件，但是标记并不是控件本身，仅仅是那个控件的标记。HTML文件中的标记由浏览器来解析，产生相应的界面元素（控件），最终生成网页上可见的那些内容。     标记可以有自己的属性和内容。标记的属性指...
CSS入门之样式表与选择器详解
青梅煮酒
10-20 1502
    CSS用来定义HTML页面中文字显示样式，还有类、层等特性，还可以对文字重叠、定位等。引入CSS到HTML中，主要是因为在传统的HTML上控制文字显示样式和版面非常难，引入CSS之后，控制方式变得简单，页面也变得更加美观、丰富。     所以CSS主要就是用来提供样式，样式一般用样式表来描述，每一种样式对应一种样式表。       一  样式表     一个样式表的组成有三部分：选...
JavaWeb第二章HTML与CSS网页03
柳橙青芒的博客
10-16 257
表格标记
关于使用＜input type=“text“ id=“username“ ＞＜/input＞，使用$(“#username“).val()无法取到vlaue值问题。
weixin_42141284的博客
03-16 1207
今天写demo时遇到一个问题，在使用jquery取id为username的文本框的值时，无法取到内容，详细情况如下： 从上面可以看出，整个body中只有一个id 为username，最终结果为用户名并没有取到，但密码取到了，最后，将id为username改一下，就取到输入的用户名值。 ...
知识点整理：css,html
Crazy_GirlLL的博客
03-10 184
响应式布局，弹性布局，百分比布局，流式布局这四种布局的区别 flex布局和grid布局的区别 css动画技术，Animate.css动画库的使用 div+css布局 重构？？ 重绘，回流 html的语义化 canvas localStorage，sessionStorage，cookie，区别，异同 media媒体查询 ...
html+css知识点总结
06-24
html+css知识点总结
HTML & CSS设计与构建网站 完整中文版带目录.pdf
09-06
HTML & CSS设计与构建网站 完整中文版带目录.pdf 个人收集电子书，仅用学习使用，不可用于商业用途，如有版权问题，请联系删除！ 前言 v 第1章　结构 1 第2章　文本 29 第3章　列表 51 第4章　链接 63 第5章　图像 ...
Css+Html仿ChatGpt聊天页面Demo
08-04
我们将使用HTML和CSS来实现一个仿ChatGPT聊天对话官方页面。我们的目标是创建一个与chat.openai.com相似的界面，展示一种用于展示聊天机器人对话的布局和样式。 为了实现我们的目标，我们需要遵循以下步骤： 1. ...
HTML&CSS的思维导图笔记
04-12
这份“HTML&CSS的思维导图笔记”无疑是对这两个核心技术的全面梳理，对于初学者和进阶者都是极好的学习资源。 HTML是网页内容的结构语言，它定义了网页的基本元素，如标题、段落、图片、链接等。HTML由一系列的标签...
html-css-js学习过程中的知识点.zip
01-01
html-css-js学习过程中的知识点html-css-js学习过程中的知识点 html-css-js学习过程中的知识点html-css-js学习过程中的知识点 html-css-js学习过程中的知识点html-css-js学习过程中的知识点 html-css-js学习过程中的...
html中input标签的alt和title属性的比较
印象笔记搬家ing......
04-07 1994
html中input标签的alt和title属性的比较 相同点: 都会飘出一个小浮层,显示文本信息; 不同点: input : input既可以是属性也可以是标签,input可以用到任何元素上,把鼠标移动到元素上面,就会显示title的内容,以达到补充说明或者提示的效果 . alt只能是属性.只能用在img input area这三个标签里 包括applet**用于...
2024巴黎奥运会中国队奖牌数据
08-17
2024巴黎奥运会中国队奖牌数据
DBO-LightGBM蜣螂优化算法优化LightGBM分类预测，优化前后对比（Matlab完整源码和数据）
08-17
1.Matlab实现DBO-LightGBM蜣螂优化算法优化LightGBM分类预测,优化前后对比，Matlab调用Python的LightGBM库（完整源码和数据）。 2.输出对比图、混淆矩阵图、预测准确率，运行环境Matlab2023及以上，配置Python的LightGBM库。兼容测试链接：https://ww2.mathworks.cn/support/requirements/python-compatibility.html 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：机器学习之心，博客专家认证，机器学习领域创作者，2023博客之星TOP50，主做机器学习和深度学习时序、回归、分类、聚类和降维等程序设计和案例分析，文章底部有博主联系方式。从事Matlab、Python算法仿真工作8年，更多仿真源码、数据集定制私信。
基于协同过滤的电影推荐系统python代码+数据库
08-17
基于协同过滤的电影推荐系统python代码+数据库，基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据
包装标贴机_机械3D图可修改打包下载.zip
08-17
包装标贴机_机械3D图可修改打包下载.zip
f506603c-5697-44df-bba4-738d7c493cac (2).zip
08-17
f506603c-5697-44df-bba4-738d7c493cac (2).zip
苹果apple目标检测数据集.zip
最新发布
08-17
内含JPEGImages文件夹和Annotations文件夹。其中JPEGImages文件夹下是1002张苹果图片，Annotations文件夹下则是对应的1002个xml标签，用于目标检测训练模型使用。 标签部分如下： <object> <name>apple</name> <difficult>0</difficult> <bndbox> <xmin>62</xmin> <ymin>112</ymin> <xmax>202</xmax> <ymax>248</ymax> </bndbox> </object>
HTML&CSS入门指南：构建完美网站
这本书详细介绍了以下知识点： 1. **设置基础**：这部分可能涵盖安装必要的软件，如文本编辑器，以及理解HTML和CSS的基础结构和语法规则。 2. **创建首个网页**：介绍如何编写简单的HTML代码来创建网页，包括定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凌川江雪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值