html和css

来源：互联网发布：linux系统管理员薪水编辑：程序博客网时间：2024/06/08 04:15
<!--html 超文本编辑语言--><!DOCTYPE html><html><head>  <meta charset="utf-8"><title>网页学习</title></head><body><h1>标题标签</h1><h2>tian</h2><h3>tian</h3><!--h标签用于显示标签，一共有6个，从小到大，h1最大--><h4>tian</h4><h5>tian</h5><h6>tians</h6><p>  <i>段落标签</i><!--i为斜体标签-->  <em>段落</em> <!-- em 也是斜体-->  <strong>段落</strong>  <!--strong字体加粗标签-->  <font color="red">段落</font><!--制定字体颜色-->  段落<br/><!--换行标签-->  段落</p> <!--p为段落标签，--><a href="http://www.baidu.com" target="_blank">百度</a>  <!--a  超链接   target _blank 另起一个窗口打开--><a href="http://www.baidu.com"><img src="./1.jpg"></a><!--图片加载超链接--><!--无序列表 ul与li结合--><ul>  <li>女装/男装/内衣</li>  <ul>    <li>裙子</li>    <li>衬衫</li>  </ul>  <li>鞋子/包</li>  <li>卫生</li></ul><!--有序列表 ol li 结合使用--><ol>  <li>nvshi</li>  <li>jfoiwjef</li>  <ol>    <li>jfie</li>    <li>jfdisuas</li>  </ol>  <li>jfiwefj</li></ol><!--自定义列表--><dl>  <dt>jfiaejfo</dt>  <dd>fads</dd></dl><!--表格--><table  border="1"  width="400" height="50"cellpadding="10" cellspacing="1"><!--table 表示表格  border表格默认无边界，这个是添加边界width也可以设置百分比 width="100%"占据body width--cellpadding表格内边距 cellspacing 表格单元之间的边距>  <tr><!--tr表示行-->   <th>I</th> <!--td 表示一列  th也是一列不过是表头 colspan 表示下两列表头合并   rowspan跨行   col row  span-->   <th>love</th>   <th>you</th>  </tr>  <tr>  <td>Do</td>  <td>you</td>  <td>love</td>  </tr></table><!--表单 用来收集用户输入信息--><form action="http://www.baidu.com">表单：<br/><p>  用户名：<input type="text" name="user" id="demo" value="bbb"></p><p>  密码：<input type="password" name="pwd" id="userpwd"></p><p>  <!--type指定显示的是什么 text 文本  password 密码  radio单选框 checkbox复选框  file 上传-->  性别：<input type="radio" name="sex"  checked>男   <input type="radio" name="sex">女</p><p>  爱好:<br/>  <input type="checkbox" name="hobby" id="">篮球  <input type="checkbox" name="hobby" id="">足球</p><p>  上传：<input type="file" name=""></p><p>  <!--多行文本-->  介绍：<br/>  <textarea  name="intro" cols="30" rows="5"></textarea></p><p>  <!--两个按钮的区别：button可以提交表单，input普通-->  <input type="button" name="" value="按钮 ">  <button>按钮</button>  <!--提交整个表单 form-->  <input type="submit" name="" value="注册">  <input type="reset" name="" value="表单重置"></p><p>  <!--下拉列表-->  <select>  <option>石家庄</option>  <option selected>tianjing</option>  <option>beijing</option>  </select></p></form><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D200/sign=9df930e1bc0e7bec3cda04e11f2cb9fa/314e251f95cad1c8037ed8c97b3e6709c83d5112.jpg"><!--img显示图片  src指定图片地址，可以是url 可以是文件在本地的地址  ./表示当前路径 ../表示上层目录--><img src="./1.jpg" alt="这是一个美女图片" title="美女"><!--alt title 表示图片的说明，也可供浏览器搜索--><img src="./1.jpg" width="400" height="300"><!--框架：多个页面加载到一个页面 上下左右分层等   注意：使用frameset框架，主页面中没有body标签--><frameset rows="20%,30% ，50%" border="1">  <frame src="a.html"></frame>  <frame src="b.html" noresize=""></frame>  <!--noresize ：设置比例后可以用鼠标拖动改变比例，norelcosize 设置不可改变比例-->  <frameset cols="40%,60%">  <frame src="b.html"></frame>  <frame src="a.html"></frame>  </frameset></frameset><br/><!--css 层叠样式列表，定义颜色、字体大小、边框 行高等，添加方法：1、在head中定义 body中某个标签的定义<style>p{   Color:red;}</style>2、行内样式    <p  style="color:red">标签颜色</p>    <p><font color="red"></font></p>3、外部css文件  添加: <link>标签添加到head三种方式的优先级：这要看那个是最后的描述，只显示最后的描述，css的选择器：1、元素选择器：就是直接定义标签：p{ color:red;}2、id 选择器：唯一<p id="p1">tian</p>#p1代表选中p元素: #p1{ color:red;}3、class选择器,可以有多个<p class="desc">song</p><p class="desc">tao</p>.desc{color:red;}4、后代选择器，就是标签子标签选择器body p{ color:red;}  bod下的p标签；5、伪类选择器<style>  a{  color:green;  }  a:hover{  表示鼠标移动到那时触发。  color:red;  }</style>字体样式： p{font-style:italic; 斜体:normal正常font-weight:bold;变粗， normalfont-size:20pxfont-family:"宋体"；font:italic bold 20px "微软雅黑";//合成 } 颜色样式：  p{  color:red;  color:#ff0000;  color:rgb(255,0,0);  }边框样式：  p{border-width:1px;border-style:solid；直线 dashed虚线 dotted点线border-top-style:solid  直线放到上面border-left-color:red; 上部边框颜色，  }列表样式：li{  list-style-type:none;点去掉，  text-decoration:underline;加下划线}文本样式：p{  text-align:left;文本左对齐  text-indent:32px;缩进  line-height:20px;行高}--><style type="text/css">  p{  display: inline;/*把块元素转换为行元素   dispaly:inline-block 把元素变为行块元素    也就是宽高 定义起作用，*/  }</style><p><!--p是一个块元素，自己单独占据一行-->  <p>这是一个段落</p>  <p>这是一个段落</p>  <p>这是一个段落</p>  <p>这是一个段落</p></p><style type="text/css">  #div1{  width: 100px;  height: 100px;  background-color: #ccc;  background-image: url("");/*图片地址*/  }</style><div id="div1"></div></body></html>
0 0