HTML 基础笔记
|
10
|
0
|
JavaWeb

1673 字
|
14 分钟

<!DOCTYPE html> <html lang=”en”> <head> <me

Web标准

Web标准也称网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium，万维网联盟负责制定。分为三层，各司其职，实现结构、表现、行为分离**。

  1. HTML：负责网页的结构（页面元素和内容）
  2. CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小、间距、布局等）
  3. JavaScript：负责网页的行为（交互效果、动态逻辑）

优势：便于维护、分工开发、网页加载性能更好、利于搜索引擎收录

Html常用标签

HTML（HyperText Markup Language）：超文本标记语言

  • 超文本：超越了纯文本的限制，除文字外，可以嵌入图片、音频、视频、超链接等资源。
  • 不是编程语言，是标记语言，由一组标签组成。

基础骨架

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8" />
       <title>Hello Html</title>
    </head>
    <body>
       <!-- 网页内容全部写在body里面 -->
    </body>
</html>
  • <!DOCTYPE html>：声明文档类型为HTML5
  • <head>：存放网页配置信息，内容不会直接展示在页面
  • <body>：页面可视内容区域

常用基础标签

<!-- 标题 headline  h1~h6，h1最大，h6最小，自带加粗、独占一行 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<!-- p:paragraph 段落标签，自带上下间距 -->
<p>京东（股票代码：JD），中国自营式电商企业，创始人刘强东担任京东集团董事局主席兼首席执行官。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部等。2013年正式获得虚拟运营商牌照。</p>
<p>王老师是Java讲师,朱老师是Java讲师</p>

<!-- img 图片标签
src：图片路径；width/height：宽高；建议只设置一个，图片等比例缩放
-->
<img src="img/bd.png"/>
<img src="img/bd.png" width="100px" height="100px">

<br/> <!-- br：强制换行标签，单标签 -->

<!-- a:超链接标签
href：跳转地址；
target="_blank" 新窗口打开页面；不写默认当前窗口打开
 -->
<a href="http://www.baidu.com">当前窗口跳转到Baidu</a>
<a href="http://www.baidu.com" target="_blank">新窗口跳转到Baidu</a>

<!-- 无序列表 ul=unordered list  li=list item
默认圆点符号
-->
<ul>
   <li>北京</li>
   <li>上海</li>
   <li>深圳</li>
   <li>广州</li>
</ul>

<!-- ol:ordered list 有序列表，默认数字序号 -->
<ol>
   <li>北京</li>
   <li>上海</li>
   <li>深圳</li>
   <li>广州</li>
</ol>

div和span（布局标签）

网页开发中，div 和 span 属于无语义布局标签，专门用来划分区域、布局页面。

分类：块级元素 & 行内元素

  1. 块级元素 block 单独占一行，宽度默认填满父容器，可以设置宽高

    代表：h1~h6、p、ul、ol、div

  2. 行内元素 inline 不会独占一行，多个元素横向并排；默认不能直接设置宽高

    代表：img、a、span、input

示例代码

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Hello Html</title>
</head>
<body>
   <!-- div：块级元素，独占一行，可以嵌套任意标签 -->
   <div>Hello Div1</div>
   <div>Hello Div2</div>

   <!-- span：行内元素，横向并排，用于局部文字样式修改 -->
   <span>Span1</span>
   <span>Span2</span>
</body>
</html>

表格 table

标签说明：

  • <table>：表格整体
  • <tr> table row：表格行
  • <th> table head：表头单元格，文字默认加粗居中
  • <td> table data：普通单元格

常用属性：

  • border="1"：边框
  • cellspacing="0"：单元格之间空隙清零，合并边框
<table border="1" cellspacing="0" width="700px">
    <tr>
        <th>讲师名称</th>
        <th>所教班级</th>
    </tr>
    <tr>
        <td>张老师</td>
        <td>C语言</td>
    </tr>
    <tr>
        <td>赵老师</td>
        <td>Java</td>
    </tr>
    <tr>
        <td>李老师</td>
        <td>Python</td>
    </tr>
</table>

form 表单

作用：收集用户输入的数据，提交给后端服务器

核心：表单元素必须添加 name 属性，否则数据无法提交！

form属性

  • action：提交数据的服务器地址

常见表单组件

  1. type="text"：单行文本输入框
  2. type="password"：密码框
  3. type="radio"：单选框 同一组name必须相同，checked 默认选中
  4. type="checkbox"：复选框
  5. <select><option>：下拉选择框，selected 默认选中
  6. type="submit"：提交按钮（触发表单提交）
  7. type="reset"：重置按钮（恢复表单初始状态）
  8. type="button"：普通按钮，默认无功能

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="//baidu.com">
    <table border="1" cellpadding="0">
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="1"/></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="2"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="radio" name="3" value = "1">男
                <input type="radio" name="3" value = "2">女
                <input type="radio" name="3" value = "3">未知</td>
        </tr>
        <tr>
            <td>城市：</td>
            <td><select name="4">
                <option>济南</option>
                <option>上海</option>
                <option selected>武汉</option>
                <option>杭州</option>
            </select></td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td><input type="checkbox" name="4">音乐<br>
                <input type="checkbox" name="4">看书<br>
                <input type="checkbox" checked name="4">爬山<br>
                <input type="checkbox" name="4">锻炼</td>
        </tr>
        <tr>
            <td><input type="submit" value="提交"></td>
            <td><input type="reset" value="重置"/></td>
        </tr>
    </table>
</form>
</body>
</html>

补充高频考点（背诵）

  1. 表单能够提交数据的前提：表单控件设置 name 属性
  2. radio单选框实现互斥：相同name
  3. target="_blank" 新标签页打开链接
  4. 块级、行内元素区分：div(块)、span(行内)
  5. Web三层：HTML结构、CSS表现、JS行为

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title></title> </head> <body> <form action=”//baidu.com”> <table border=”1″ cellpadding=”0″> <tr> <td>用户名：</td> <td><input type=”text” name=”1″/></td> </tr> <tr> <td>密码：</td> <td><input type=”password” name=”2″/></td> </tr> <tr> <td>性别：</td> <td><input type=”radio” name=”3″>男 <input type=”radio” name=”3″>女 <input type=”radio” name=”3″>未知</td> </tr> <tr> <td>城市：</td> <td><select name=”4″> <option>济南</option> <option>上海</option> <option selected>武汉</option> <option>杭州</option> </select></td> </tr> <tr> <td>兴趣爱好：</td> <td><input type=”checkbox”>音乐<br> <input type=”checkbox”>看书<br> <input type=”checkbox” checked>爬山<br> <input type=”checkbox”>锻炼</td> </tr> <tr> <td><input type=”submit” value=”提交”></td> <td><input type=”reset” value=”重置”/></td> </tr> </table> </form> </body> </html>

CSS定义和基本选择器

CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式(表现)。

CSS使用：

1、通过选择器选择上标签

2、在选择的标签上设置样式

选择器

选择器写法 作用 使用示例
标签名{} 选中页面所有该标签 p{ color:red; }
.类名{} 选中 class="类名" 元素（最常用） .txt{ font-size:16px; }
#id名{} 选中 id="id名" 元素，页面id唯一 .box{ width:200px; }
*{} 通配符，选中所有元素 *{ margin:0; padding:0; }

文本字体样式

CSS属性 功能 示例值
color 设置文字颜色 color: red; / color:#ff0000
font-size 字体大小 font-size: 20px;
font-weight 字体加粗 bold(加粗)、normal(正常)
font-style 文字斜体 italic(斜体)、normal
font-family 设置字体 font-family:"微软雅黑";
text-align 文本水平对齐 center居中 / left / right
line-height 行高（文字垂直居中常用） line-height:40px;
text-decoration 文字装饰线 none(取消下划线)、underline下划线

宽高、背景

CSS属性 功能 示例值
width 盒子宽度 width: 300px;
height 盒子高度 height: 150px;
background-color 背景颜色 background-color: pink;
background-image 背景图片 background-image:url("1.png");
background-repeat 背景图平铺 no-repeat不平铺
background-position 背景图片位置 center居中

边框

CSS属性 功能 示例
border 边框简写（宽度 样式 颜色） border:1px solid black;
border-radius 圆角 8px 、50%圆形
border-top 单独设置上边框 border-top:1px solid red;

内外边距（盒子模型核心）

CSS属性 功能 示例
margin 外边距（元素和外部距离） margin:10px; margin:0 auto;块级水平居中
padding 内边距（内容与边框距离） padding:10px;

简写顺序：上、右、下、左

元素显示模式 display

属性值 作用
display:block 转为块级元素：独占一行，可设置宽高
display:inline 转为行内元素：并排，不能设置宽高
display:inline-block 行内块元素：横向并排，支持宽高
display:none 隐藏元素，不占用页面位置

列表样式

CSS属性 功能 示例
list-style 列表符号样式 list-style:none; 清除ul小圆点

超链接伪类

伪类 含义
a:link 未访问的链接
a:visited 访问后的链接
a:hover 鼠标悬浮在链接上（最常用）
a:active 鼠标点击瞬间

示例：

a:hover{
    color:red;
}

⚠️重要补充规则

  1. 多个类名：class="box txt" 空格分隔
  2. 类选择器名称前面必须带 .
  3. 行内元素（span、a）默认无法设置宽高
  4. 属性结尾必须书写英文分号 ;
上一篇
下一篇