CSS精简笔记（一）------HTML标签

一、基本概念

• html：构成了网页的骨架，不同标签标识了不同的功能
• css：基于标签进行特效渲染，产生静态的或简单的动态渲染效果
• JavaScript：逻辑处理，让页面动起来，或者与后端服务器通信以跟用户互动

二、块级元素

2.1 div、p、h

名称	功能	示例
标题标签	标题：有六级（1～6)，浏览器有默认加粗字体大小设置	<h1> 一级标题</h1>
段落标签	包段落，两段落间保有大的空隙，文字随窗口大小自动换行	<p>这是一个段落内容</p>
盒子标签	网页布局的最基本元素，可以装所有标签	<div><p>这是一个段落内容</p></div>

• HTML5中div标签细分
  

  特点：以上标签独占一行，可以设置高宽，宽度默认父级宽度100%
  强制转化：display: block;

2.2 表格table

功能：用于展示数据

• 常规展示

  <table>
      <!-- 表头，可能有多行 -->
  	<thead>				
  		<!-- 表行tr:table row的意思 -->								
  		<tr>				
  			<!-- 表头数据元素 -->						 
  			<th>姓名</th>									   
  			<th>学号</th>
  			<th>性别</th>
  		</tr>
  	</thead>
  	<!-- 表格主体 -->
  	<tbody>				
  		<!-- 表行tr:table row的意思 -->									  
  		<tr>					
  			<!-- 表数据元素td:table data -->				
  			<td>王小二</td>						   
  			<td>123</td>
  			<td>公</td>
  		</tr>
  	</tbody>
  	
  </table>
  

• 合并表格

  <!-- table属性，后面可用css做 -->
  <table border='1'>								  	
      <!-- 同上 -->
      <thead>															
        <tr>									
          <th>列一</th>									
          <th>列二</th>
          <th>列三</th>
        </tr>
      </thead>
      
      <tbody>														
        <tr>										
          <!-- 合并2个相邻行（row） -->
          <td rowspan="2">一行一列</td>				   	
          <td>一行二列</td>
          <td>一行三列</td>
        </tr>
        <tr>														
          <!-- 合并2个相邻列（column） -->
          <td colspan="2">二行二列</td>					
        </tr>
      </tbody>
    </table>
  

  

2.3 列表ul、ol、dl

• 无序列表(最常用)

  <!-- 多用在样子相同的标签上 -->	
  <ul>											 
      <!-- li中可放标签 -->
  	<li>列表1</li>									  	
  	<li>列表2</li>
  	<li>列表3</li>
  </ul>
  

• 有序列表（较少用）

  <ol>
  	<li>列表1</li>
  	<li>列表2</li>
  	<li>列表3</li>
  </ol>
  

• 自定义列表（常用在页底或鼠标悬停后产生下拉菜单）

  <dl>
  	<dt>自定义列表标题</dt>
  	<dd>列表内容一</dd>
  	<dd>列表内容二</dd>
  	<dd>列表内容三</dd>
  </dl>
  

2.4 表单form

功能：搜集用户输入的信息，提交给后台服务器，现多用axios与服务器交互，form为块级元素，input为行内块级元素

• 参数
  • 键值对：传给服务器：name:value
  • 可选项：checked（默认选中）、maxlength=6(最长输入)、required(必须填)、placeholder=”提示文本“
  • type可选项：email、url、date、time、month、week、number、tel(手机号)、search、color
• 代码块

  <form action="/home" method="get">
  	<!-- 输入框表单 -->	
  	用户名：
  	<input type="text" name="username" value="请输入用户名" maxlength="6"><br>
  	密码：
  	<input type="password" name="pwd"><br>
  	
  	性别：
  	<!-- 单选框表单 -->	
  	<input type="radio" name="sex" value="male" checked>男 
  	<input type="radio" name="sex" value="female">女<br>
  	
  	爱好：
  	<!-- 多选框表单 -->	
  	<input type="checkbox" name="habby" value="eat">吃饭
  	<input type="checkbox" name="habby" value="sleep" checked>睡觉
  	<input type="checkbox" name="habby" value="walk">散步<br>
  	
  	<!-- 按钮类表单 -->	
  	提交按钮：<input type="submit" value="提交按钮文字"><br>
  	重置按钮：<input type="reset" value="重置按钮文字"><br>
  </form>
  

• 效果
  

  点提交后网址栏会显示
  http://192.168.3.4/home?username=nobody&pwd=111&sex=male&habby=eat&habby=sleep

• 特殊表单标签
  • label标签
    • 功能：点击绑定的表单文字，也会选择表单中元素
    • 代码

      <!-- id属性 -->	
      <input type="radio" name="sex" value="male" id='nan' checked>	 
      <!-- 点击这个文字也会选择男 -->
      <label for='nan'>男</label>								
      

  • 下拉选项标签
    • 功能：下拉框选择，节省空间
    • 代码

      籍贯：
      <select name="position" >
      	<option value="shandong">山东</option>
      	<option value="shanghai">上海</option>
      	<option value="guangdong" selected>广东</option>
      </select>
      

  • 文本域标签
    • 功能：多行输入文本框
    • 代码

      今日反馈<br>
      <!-- 可以用CSS设置高宽 -->	  
      <textarea name="sum"></textarea>					
      

三、行内元素

3.1 span、button

• 常用两个

  名称	功能	示例
  行内元素标签	隔离出部分元素增加class等样式设置	这是一个段落<span>隔离出的文字</span>内容， 有title属性，见图片元素
  按钮	结合js实现特定的功能	<button> 按钮</button>

  特点：

  1. 以上标签一行可放多个，宽、左右内外边距可以控制
  2. 默认宽度为内部元素宽度，内边距会撑大盒子，只能容纳文本或行内元素
  3. 对齐方式：可给其父元素设置text-align: center;调整左中右对齐
     强制转化：display: inline;

3.2 超链接a

• 功能：用于跳转页面，内部若包含标签， 则强制转换成块display:block;，但不可以有a标签
• 常规写法： <a href='http://baidu.com' target='_blank'>百度 </a>
  • 参数说明
    • href：跳转的网址，若是内部网站，直接写路径如：/home(Vue写法)
    • target：_blank表示在新页面打开，若是省略则在本页面打开
• 锚点写法： <a href='#maodian'>跳转到ID选择器为maodian处 </a>
  • 参数说明
    • href：还可为/home#maodian，或者http://jiawangzhi/home#maodian
    • #maodian：直接跳转到标签为<div id='maodian'>跳转到此处</div>，<h1 id='maodian'>跳转到此处</h1>

四、行内块元素

4.1 img、input

• 说明

  名称	功能	示例
  图片标签	图片	<img src="图片.jpg" alt="图片显示不出来显示文字" title="鼠标悬停显示文字" width="304" height="228">， 默认宽高单位px，src为图片路径
  表单标签	表单	<input type="text" name="username" value="请输入用户名" maxlength="6">

  特点：以上标签一行可放多个，高宽、内外边距都可以控制
  强制转化：display: inline-block;

五、功能标签

5.1 br、&nbsp、b、i、u、del

• 说明

  名称	功能	示例
  换行标签	强制换行，默认在html代码中输入enter键不会渲染成换行	<p>这是一个<br>段落内容</p>
  空格	网页代码不能识别连续两个以上空格	&nbsp;
  加粗标签	加粗文字	<b>加粗</b>
  倾斜标签	倾斜效果	<i>倾斜</i>
  下划线标签	下划线效果	<u>下划线</u>
  删除线标签	删除线效果	<del>删除线</del>

下一篇：CSS精简笔记（二）------选择器及字体设置