Day 39 学习分享 - HTML常用标签和CSS入门

1. 标题标签:

<title></title>

2. 网页标题标签

一共六级标题, 字体从大到小
<h1></h1> <h2></h2>  <h3></h3>  <h4></h4> <h5></h5> <h6></h6>

3. 网页段落标签

<p></p>

4. 换行、水平线标签

<br/> 自闭和标签
<hr/> 自闭和标签

5. 字体样式标签

<em></em>		  字体斜体
<strong></strong> 字体加粗

6. 常用符号及注释标签

空格:
	 
	网页中多个空格表示1个空格[space]
大于号:
	>  
大于等于:
	≥   
小于号: 
	<  
小于等于:
	≤
双引号: 
	"
版权符号:
	©
注释:
	<!--注释的内容-->

7. 插入图片标签

<img/>
属性:
	src：图片的路径
	height="225" 设置图片的高度
	width="300"  设置图片的宽度
	alt=""  当网速慢的时候，图片还没加载出来，那么先加载alt里面的文字！
	title="" 鼠标悬浮在图片上显示的文字！

8. 超链接标签

> 文字超链接    
	<a href="超链接的链接地址" target="_self">超链接文字</a>
		href:超链接的链接地址
		target:超链接窗口打开位置
		target="_blank" :点击超链接，在新的窗口打开，当前窗口不关闭
		target="_self" :点击超链接，在当前窗口打开，默认值

> 图片超链接 
	<a href="https://item.jd.com/66484990081.html" target="_self">
		<img src="images/1111.gif" height="397"/>
	</a>


> 锚链接
	<!--锚点位置-->
	<a name="top"></a>
	<a href="#top">回到顶部</a>

> 功能性链接
	<!--点击之后弹出QQ对话框-->
		<a href="tencent://message/?uin=好友QQ号">联系QQ客服</a>
	<!--点击之后，弹出发邮件的客户端-->
		<a href="mailto:bruce9527@163.com?subject=测试发邮件&body=就是一个测试邮件">发送Email</a>
       

9. 音频、视频超链接

	<audio style="display: none;" controls="controls" autoplay="autoplay" loop="loop">
         <source src="mp3/aa.mp3"/>
     </audio>

	<video controls="controls" width="500" autoplay="autoplay" loop="loop" poster="images/004.jpg">
         <source src="mp4/2.mp4"/>
      </video>

10. 列表标签

>无序列表：unorder list ---> ul

      <ul type="circle">
         <li></li>
         <li></li>
         <li></li>
      </ul>

      无序列表：默认的符号是实心的圆点！
      type="disc": 实心原点
      type="circle": 空心圆圈
      type="square": 实心方块

      无序列表标签可以嵌套

>有序列表: order list ----> ol

      <ol type="1">
         <li><li>
         <li><li> 
         <li><li>  
      </ol>
   
      默认的项目符号是：数字排序！

      type="1"  默认值 数字排序  默认符号
      type="A"  大写字母排序
      type="a"  小写字母排序
      type="I"  大写罗马数字排序   I  II  III  IV  V  VI VII  VIII
      type="i"  小写罗马数字排序

>定义列表：
   基本语法:  defined list ---> dl
      <dl>
         <dt>头部</dt>
            <dd>选项</dd>
            <dd>选项</dd>
        <dt>头部</dt>
            <dd>选项</dd>
            <dd>选项</dd>
      </dl>

11. 表格标签

语法：
      <table>
         <tr>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
         </tr>
         <tr>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
            </tr>
      </table>

   表格属性:
      
   表格的边框：border="1"  设置表格和单元的边框
   表格的边框颜色： bordercolor="red"
   表格的背景色： bgcolor="antiquewhite"
   表格的宽度: width="500" 宽度还可以写百分比 width="50%"
   表格的高度: height="500" 
   align="center" 表格在浏览器中对齐方式
      center居中
      Left居左
      Right 居右

   cellspacing="20" 设置单元格之间的距离
   cellpadding="10" 设置单元格内容到单元格边框的距离

   表格内容的对齐方式：
      
      水平方向：左中右
            
         左对齐：默认值 align=”left”
         中对齐  align=”center”
         右对齐  align=”right”

      竖直方向：上中下

         上对齐  valign="top"
         中对齐  valign="middle"  默认值 居中
         下对齐  valign="bottom"
         

    表格单元格合并：
         
        跨行：
			colspan=""
        跨列：
			rowspan=""

12. 表单标签

12.1 表单

封装表单的数据，方便提交:

<form method="post" action="http://www.baidu.com">

    </form>

    属性1： method="post" 表单提交的方式
    属性2:  action="http://www.baidu.com"  表单提交的地址

12.2 普通文本框

<input type="text" name="username" value="" maxlength="6" size="20" placeholder="请输入账户名"/>

   type="text"：普通文本框
   name="username" 文本框的名字，后期取值用的！
   value="" 文本框的值，如果用户输入，那么可以省略
   maxlength="6" 课输入的最大字符数
   size="20" 文本框的长度
   placeholder="请输入账户名"  用户输入的友好提示

12.3 密码文本框

<input type="password" name="userpass" value="" maxlength="6" size="20" placeholder="请输入密码"/>

   type="password"： 密码文本框
   name="userpass" 密码文本框的名字，后期取值用的！
   value="" 密码文本框的值，如果用输入，那么可以省略
   maxlength="6" 课输入的最大字符数
   size="20" 文本框的长度
   placeholder="请输入密码"  用户输入的友好提示

12.4 单选按钮

<input type="radio" name="gender" checked="checked" value="male"/>男
<input type="radio" name="gender" value="female"/>女

type="radio"：单选按钮
name="gender" 单选按钮名字，同一组单选按钮 name的值保持一致!
checked="checked" 默认被选中!
value="male" 动态页面提交的真正的值!

12.5 多选按钮

<input type="checkbox" name="hobby" value="game" checked="checked"/>游戏
<input type="checkbox" name="hobby" value="singing"/>唱歌
<input type="checkbox" name="hobby" value="runing" checked="checked"/>跑步
<input type="checkbox" name="hobby" value="rap"/>说唱

type="checkbox" 多选按钮
name="hobby" 多选按钮名字，同一组多选按钮 name的值保持一致！
checked="checked" 默认被选中！
value="rap" 动态页面提交的真正的值!

12.6 下拉框

<select name="city" size="1">
    <option value="bj">北京市</option>
    <option value="nj">南京市</option>
    <option value="dj">东京市</option>
    <option value="tj" selected="selected">天津市</option>
</select>

name="city" 下拉框的名字
size="1" 显示的子项个数
value=""  实际提交到数据库的值
selected="selected" 默认选中，如果不写默认选第一个!

12.7 多行文本框

<textarea name="remark" cols="50" rows="10">北京市XXX...</textarea>

name="remark": 多行文本框名字
cols="50" 初始列宽度
rows="10" 初始的行数

注意: textarea没有value属性，如果有内容放入标签之间!

12.8 文件选择框

<input type="file" name="photo"/> 

type="file" 文件上传框，可以选择一个要上传的文件
name="photo" 文件上传框的名字

12.9 按钮

> 普通按钮：
	<input type="button" value="普通按钮"/>
	普通按钮需要写事件，需要针对这个按钮写功能代码！

> 提交按钮：
	<input type="submit" value="我要注册"/>
	作用：把form用户输入的信息，放入表单中一起提交！

> 图片按钮:
	<input type="image" src="images/12344.png" value="我是图片"/>
	作用：使用一张图片作为表单提交的按钮，提交表单

> 重置表单按钮：
	<input type="reset" value="重置"/>
	作用: 重置表单内所有信息重新填写

12.10 表单的隐藏域

<input type="hidden" name="pass" value="admin234234"/>
方便开发者在页面中藏值,这个值网站的使用用户不需要知道,只是给开发者用的!页面上显示不出来!

12.11 lable标签

<input type="radio" name="gender" checked="checked" value="male" id="f2"/>
<label for="f2">男</label>
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上

13. 标签的只读和禁用

只读:
	readonly="readonly"  只可以获取标签的值，但是无法修改
禁用:
	disable="disable"    这个标签直接失效，里面的值也无法获取。

14. CSS入门

14.1 CSS概念

CSS全称: 层叠样式表文档
	(Cascading Style Sheet)

如果说HTML相当于一个人的骨架, 那么CSS就相当于这个人的皮肤或者衣服!

CSS可以对于HTML排版的内容进行美化, 让原本只有HTML标签的网页丰富多彩, 吸引用户的访问, 给用户一种美感

14.2 CSS的优势

1. 内容与表现分离(可以将CSS作为一套皮肤单独写在一个独立的文件中, 和HTML文件分离开来)
2. 网页的表现统一, 容易修改, 更换方便
3. 丰富的样式, 使得页面布局更加灵活
4. 减少网页的代码量, 增加网页的浏览速度, 节省网络带宽
5. 运用独立于页面的CSS, 有利于网页被搜索引擎收录

14.3 CSS语法规则

选择器(Selector): 选中网页哪些元素需要加样式

基本选择器:
	1. 标签选择器
	2. 类选择器
	3. ID选择器

标签选择器:

标签{
    属性名1:属性值1;
    属性名2:属性值2;
	...
}

p{
    color:red;
    font-size:14px;
}

类选择器:

.类名{
    属性名1:属性值1;
    属性名2:属性值2;
	...
}

<h2 class="类名"></h2>
<p class="类名"></p>

.class{
    color:red;
    font-size:14px;
}

ID选择器:

#id名{
    属性名1:属性值1;
    属性名2:属性值2;
	...
}

<h2 id="id名">内容</h2>

#id{
    color:red;
    font-size:14px;
}

14.4 CSS可以书写的位置

	>行内式:
		把样式直接写在标签里面,不推荐使用,CSS样式多,标签凌乱
	>头部式:
		把样式写在head标签中,如果样式不多,可以写在head标签中,如果样式很多,建议写到外面去
	>外部式:
		把样式但多作为一个标准的css文件,提到外面.实际开发中的标准写法

14.5 CSS的优先级问题