备案控制台
开发者社区 开发与运维 文章 正文

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

2018-07-10 880
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 参考文献《JavaWeb 从入门到精通》另推相关博文一则 JavaScript_知识点梳理note1，同样是有一定量的Demo哈。1.HTML的文档结构1.标记标记是HTML文件的开头。

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

另推相关博文一则 JavaScript_知识点梳理note1，同样是有一定量的Demo哈。

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>

运行结果如图：


img_8617ca97e7bc0377931a45b9ccf2b7ea.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>

运行结果如图：

img_045f24e38268db4044659a0a3484769e.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>

运行结果如图：

img_22c9bb49cb0dea533bb65475f1d68643.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>

运行结果如图：

img_e1b20fda3793ff5c93ff0fd7dd1ab205.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>

运行结果如图：

img_ff758522b22a0f2424c06b41c6248e99.png
image.png

3.HTML表格标记

img_e6c6ddad0c7e5a78a7a5938bb1fe3bf2.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>

运行结果如图：

img_c12f6466101c9fed397ca1c55e69307a.png
image.png

4.HTML表单标记

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

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

基本语法如下：

<form action = "url" method = "get"|"post" name = "name" onSubmit = "" target = "">
</form>
img_8a0632bbd0bc73b1f135d16736018d94.png

img_5655cc39049a1920d6abca696e6dcaa0.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">
img_3240dd86f2bb2dd3337dcf5d9739cf32.png

img_c13ee2514cfa7947bbacb1d0c531314f.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>
img_a80c598210fa4a9b018939f39c18ea01.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>

运行结果：

img_642d87762ecf97f8f04256759dcdfee2.png
image.png

CSS样式表

1. CSS规则

选择符{属性：属性值；}
img_f47278c6867fee07596105478394c6c5.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>

运行结果如下：

img_ba36157a3155321ad0de238af63e6ec5.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>

运行结果如下：

img_635556b9c2954b2b9424d330098c06c1.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>

运行结果如下：

img_64f14e461acef96425f4ec8fcd62e464.png
CSS2（左）&CSS3 (右)
文章标签：
Java
前端开发
Web App开发
自然语言处理
数据安全/隐私保护
关键词：
HTML CSS
CSS html
CSS知识点
HTML知识点
HTML CSS知识点
李蔚蓬
目录
相关文章
疯狂的猿
|
4天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果，就像一些小颗粒从进度条上散落下来
疯狂的猿
15 0
HTML5/CSS3粒子效果进度条代码
算精通
|
7天前
|
移动开发 前端开发 JavaScript
：掌握移动端开发：HTML5 与 CSS3 的高效实践
：掌握移动端开发：HTML5 与 CSS3 的高效实践
算精通
22 1
桃李春风一杯酒
|
13天前
|
缓存 移动开发 前端开发
【专栏：HTML与CSS前端技术趋势篇】HTML与CSS在PWA（Progressive Web Apps）中的应用
【4月更文挑战第30天】PWA（Progressive Web Apps）结合现代Web技术，提供接近原生应用的体验。HTML在PWA中构建页面结构和内容，响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作，保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步，HTML与CSS在PWA中的应用将更广泛。
桃李春风一杯酒
34 10
桃李春风一杯酒
|
13天前
|
前端开发 JavaScript 开发者
【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发，通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合，使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展，掌握新工具，提升开发效能。
桃李春风一杯酒
38 11
桃李春风一杯酒
|
13天前
|
前端开发 JavaScript UED
【专栏：HTML 与 CSS 前端技术趋势篇】Web 性能优化：CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用，包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展，CSS模块系统、自定义属性和响应式设计将得到强化，HTML新特性也将支持复杂组件构建。同时，应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新，我们可以提升Web应用性能，创造更好的用户体验。
桃李春风一杯酒
30 6
桃李春风一杯酒
|
13天前
|
移动开发 前端开发 UED
【专栏：HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始，逐步增加高级特性，保证所有用户能访问基本内容；而优雅降级则是从完整版本出发，向下兼容，确保低版本浏览器仍能使用基本功能。实践中，遵循HTML5/CSS3规范，使用流式布局和响应式设计，检测浏览器特性，并提供备选方案，都是实现这两种策略的有效方法。选择合适策略优化网站，提升用户体验。
桃李春风一杯酒
29 4
桃李春风一杯酒
|
13天前
|
前端开发 开发者 UED
【专栏：HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局，简单易用，适合导航栏和列表；CSS Grid则适用于二维布局，能创建复杂结构，适用于整个页面布局。两者各有优势，在响应式设计中都占有一席之地。随着Web标准发展，它们的结合使用将成为趋势，开发者需掌握两者以应对多样化需求。
桃李春风一杯酒
33 5
桃李春风一杯酒
|
13天前
|
前端开发 JavaScript 搜索推荐
【专栏：HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构，语义化标签增进可读性，支持用户交互；CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战，需采取相应策略。未来，持续发掘HTML和CSS潜力，推动组件化开发创新，提升Web应用体验。
桃李春风一杯酒
23 8
桃李春风一杯酒
|
13天前
|
前端开发 UED
【专栏：HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
【4月更文挑战第30天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先规划顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。在样式设计上，注重色彩搭配、字体选择、布局与间距及图片处理。交互效果包括图片放大、添加到购物车按钮、滚动监听和评论互动，以提升用户体验。实际开发中需考虑跨设备兼容性和用户体验优化。
桃李春风一杯酒
33 5
桃李春风一杯酒
|
13天前
|
移动开发 前端开发 JavaScript
【专栏：HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先，简述HTML5用于构建网页内容，CSS3用于描述样式。接着，分四步展示实现过程：1) 设计包含输入框和提示信息的表单结构；2) 使用CSS3创建样式，增强视觉效果；3) 使用JavaScript监听输入事件，动态验证表单并显示错误信息；4) 测试和调试确保跨平台兼容性。通过学习，开发者能掌握创建带验证功能的表单，提升用户体验。
桃李春风一杯酒
28 7