html标签和css样式的学习_tag标签的样式htmlcss-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_70808444/article/details/132650303

一. html

1.什么是html : 超文本标记语言.

单标签: <标签属性名="属性值"> 如: <img src=""/> <br>

双标签:<标签属性名="属性值"></标签> 如: <font size=""></font>

2.常用标签:

2.1 文本类标签

文字标签：<font size="大小1-7" color="#16进制表示R红G绿B蓝--0-255之间"></font>
换行标签：<br/>
标题标签：<hn></hn> n表示1到6的数字
加粗：<b></b>  <strong></strong>

2.2 图片标签 src

2.3 格式化标签 div/p/span

段落标签：<p></p> 行间距，独占一行

独占一行：<div></div> 块标签

首尾相连：<span></span> 行标签

2.4 表格类标签* table/tr/td

表格标签：<table bgcolor=表格的背景" border="外框" bordercolor="#999999外框颜色" cellspacing="内外框的间距" align="center/left/right表格对齐方式"></table> >

行标签：<tr bgcolor=行的背景" align="center/left/right当前行内容对齐方式"></tr>，tr必须定义在table里 >

列标签：<td bgcolor=列的背景" align="center/left/right当前格内容对齐方式" rowspan="合并多个行" colspan="合并多个列"></td>或<th>内容居中并加粗</th>，th/td必须定义在tr里

注：列标签里可以添加任何内容

2.5 链接标签* href

页面之间跳转：<a href="跳转的地址" name="名字" target="跳转的方式：_self同窗口打开 _blank新窗口打开">内容</a>

页面内跳转：<a href="#跳转的锚点名称" name="锚点名字" target="跳转的方式">内容</a>

记录名称<a name="锚点名字" >内容</a> > 跳转：<a href="#跳转的锚点名称">内容</a>

2.6 表单类标签* form(action/method)/input/select

表单标签：<form action="跳转地址" method="提交方式get/post"></form>

post：安全

get：地址中有数据提交的记录，不安全；

注：表单内容要加name属性；

> 1. input

> 2. select

<select name="名称">单选框

</select>

<select multiple="multiple" name="">多选框(ctrl/shift) >

</select>

> 3.textarea

<textarea name=""></textarea> 多行文件框

<body>
  <form>
  用户名:<input type="text"  placeholder="默认显示的内容当输入时会自动清空"/>
  <select name="名称">单选
         <option value="1"></option>
         <option value="2"></option>
         ...
   </select>
  <select multiple="multiple" name="">多选
         <option value=""></option>
  </select>
  </form>
</body>

2.7 列表标签 *

无序

</ul> >

有序

</ol> >

自定义

<dl>

</dl>

二.css样式

1.什么是css : 层叠样式表.

2.语法:

属性名 : 属性值; 如: magin-top : 20px;

3.使用方式:

行内样式：
<div style="border-top-width:10px;color:#00ff00;"></div>
内部样式：
 	<head>
 		<style type="text/css">
 			div{border-top-width:10px;color:#00ff00;}
 			#div{border-top-width:10px;color:#00ff00;}
 			.div{border-top-width:10px;color:#00ff00;}
 		</style>
 	</head>
外部样式：推荐
 	<head>
 		<link type="text/css" rel="stylesheet" href="css文件路径" />
 	</head>

4.选择器 :给标签起的名字

标签选择器：标签名称  如:div  img  ul....
类选择器：class属性，格式: .class属性值
 	<div class="a1"></div>  .a1
 	<div class="a1"></div>
 	<p class="a1"></p>
id选择器：id属性，id的值必须唯一，格式: #id属性值
 	<div id="a1"></div>
 	<div id="a2"></div>