Html 基础 一

前端开发 作者: 2024-08-22 23:15:01
常见的标签 文本格式化标签 加粗 <b></b> <strong></strong> 倾

文本格式化标签

  • 加粗
<b></b>
<strong></strong>
  • 倾斜
<i></i>
<em></em>
  • 下划线
<u></u>
<ins></ins>
  • 删除线
<s></s>
<del></del>

图像标签

<img src="" />
src: 图片的路径
alt:图片不能显示时替换的文本
title:鼠标放上去时显示的文字
width:像素 
height:像素
border:边框

链接标签

<a href="" target="" > 文本 </a>
作用:
可以打开 诸如外网地址: http://www.baidu.com
也能到开本地的html页面

属性:
href: 目标url
target:打开目标地址的方式
  -- 默认self,在当前页面打开
  -- 可选:_blank 在新窗口中打开

段落标签

<p>
  123
</p>

锚点定位

<a href="#live">点我跳转</a>
 ...
 很长的一段话
 ...
<span id="live"></span>

base标签

<!DOCTYPE html>
<html lang=“en“>
  <head>
    <meta charset="utf-8"></meta>
    <base target="_blank" />
  </head>
</html>

特殊字符

空格: &nbsp
大于号:&gt
小于号:&lt
和号:&amp
人民币:&yen
版权:&copy
注册商标:&reg
摄氏度:&deg
正负号:&plusmn
乘号:&times
除号:&divide
平方:&sup2
立方:&sup3

列表

  • 无序列表
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
  • 有序列表
<ol>
  <li>1</li>
  <li>1</li>
  <li>1</li>
</ol>
  • 自定义列表
<dl>
  <dt>名词1</dt>
  <dd>名称解释1</dd>
  <dd>名称解释1</dd>
  <dd>名称解释2</dd>
 
  <dt>名词2</dt>
  <dd>名称解释2</dd>
  <dd>名称解释2</dd>
  <dd>名称解释2</dd>
</dl>

表格

<table width="300px" border="1px" align="center" cellspacing="10px" cellpadding="10px">
    <!--行标签,tr-->
    <!--单元格,td-->
    <tr >
        <td>name</td>
        <td>age</td>
        <td>sex</td>
    </tr>
    <tr>
        <td>tom</td>
        <td>23</td>
        <td>man</td>
    </tr>
    <tr>
        <td>jerry</td>
        <td>23</td>
        <td>woman</td>
    </tr>
</table>

tr:表示一行
td:表示一列

常见的属性:
width:
border:
对其方式:align="center/left/right"
各个单元格之间的距离:cellspacing
单元格内容与单元格边框之间的距离:cellpadding
  • 表头标签
<table>
    <!--行标签,tr-->
    <!--单元格,td-->
    <tr>
        <th>name</th>
        <th>age</th>
        <th>sex</th>
    </tr>
    <tr>
        <td>tom</td>
        <td>23</td>
        <td>man</td>
    </tr>
</table>
  • 表格标题
<table>
  <caption>this is table title</caption>
  <tr>
	<th>name</th>
    <th>age</th>
  </tr>
  <tr>
  	<th>tom</th>
    <th>23</th>
  </tr>
</table>
  • 合并单元格
    <tr>    
        <th>tom</th>
        <th colspan="2">23</th>
       <!-- <th >man</th>-->
    </tr>

input标签

type:(指定表单的类型)
text: 单行文本输入框
password:密码输入框
radio:单选输入框
checkbox:多选框
button:按钮
submit:提交按钮
reset:重置按钮
image:图形格式的提交按钮
file:文件域

name:控件名称
value:input中的默认值
size:input控件在页面中的显示宽度
checked:定义空间中默认被选中的项
maxlength:正整数,控件中允许输入的最大字符数
<tr>
  <td>性别</td>
  <td>
  	男:<input type="radio" checked=“checked” name="sex">   <!--checked控制默认被选中的项-->
    女:<input type="radio" name="sex">
  </td>
</tr>
<tr>
   <td>喜欢吃什么?</td>
 <td>
 	榴莲:<input type="checkbox" name="like">
   香蕉:<input type="checkbox" name="like">
 </td>
</tr>
<input type="image" src="xxx.png">
<tr>
	<td>上传头像:</td>
  <td>
    <input type="file">
  </td>
</tr>

label标签

<label> 用户名:<input type="text" /> </label>
<label for="target">
		用户名:<input type="text" id=“target” />
  	密码:<input type="password" />
</label>

textarea控件

<textarea  cols="每行中的字符数" rows=“多少行”>

</textarea>

下拉框

<table>
    <tr>
        <td>性别: </td>
        <td>
            <select name="" id="sex">
                <option value="">请选择:</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </td>

        <td>国籍: </td>
        <td>
            <select name="" id="or">
                <option value="男" selected="selected">中国</option>
                <option value="女">美国</option>
            </select>
        </td>
    </tr>
</table>

表单域

<form action="后端的url" method=“get/post” name=“表单名称,却分同一个页面中的不同表单”>
    username:<input type="text"/> <br>
    password:<input type="text"/> <br>
    <input type="submit" value="点击提交">
    <input type="reset" value="点击清除">
</form>

行内样式

<span style="属性1:属性1值;属性2:属性2值"> 行内样式 </span>

比如:常见的修改字体大小,颜色
<span style="color:#ccc;font-size:25px"> 行内样式 </span>

内部样式表

<head>
  <style type="text/CSS">
    选择器{
      属性1:属性1值;
      属性2:属性2值;
    }
    // class选择器使用 .{}
    // id 选择器使用 #{}
    // 标签选择器  div{}
  </style>
</head>

外链式样式

<head>
  <link href="" type="text/css" rel="stylesheet">
</head>

选择器

  • div标签可以被多个类选择器选中修饰
    <div class="c1 c2">
      
    </div>
    
  • *{
    	margin:0;
    	padding:0;
    }
    

字体相关的样式

  • p{
      font-family:"微软雅黑";
      font-family:"宋体";
      font-family:"microsoft yahei",Arial
    }
    注意点:
    1. 中文字体名称需要添加引号
    2. 英文字体名称不需要添加引号,但是如果有空格,% @ # 等特殊字符,需要添加引号
    3. 如果设置了多个字体,靠前等优先生效
      
    
  • {
      font-weight:normal;
    }
    normal:正常的字体,number为400
    bold:粗体,相当于b标签,strong标签,number为700
    bolder:特粗
    lighter:细体
    100~900(100的整数倍)
    
    number没有单位
    
  • {
      font-style:normal /*正常*/
      font-style:italic /*倾斜*/  等价于:em标签,i标签
    }
    
  • <style>
      /*选择器{font:font-style font-weight font-size font-family}*/
      h1{
        font: 400 25px "宋体"
      }
    </style>
    

文本的外观样式

  • x{
      line-height:20px;
    }
    
  •  x{
      text-align:center ; /* 比如让div中的文字水平居中对齐 */
      text-align:left ;
      text-align:right;
     }
    
  • p{
      text-indent:2em;
    }
    
  • p{
      text-decoration:underline;
      text-decoration:overline;    相当于 ins标签, u标签
      text-decoration:line-through;
      text-decoration:none;
    }
    

后代选择器

<div>
   <p>1</p>
</div>
<p>2</p>

<div class=“dv”>
   <p>1</p>
</div>

<ul>
  <li>
  		<a href="#">a</a>
  		<div>
        <a href="#">b</a>
      </div>
  </li>
</ul>
<style>
  中间使用空格隔开
	后代选择器
  div p{
     color:red;
  }
	
  .dv p{
 		 color:blue;  
  }

	后代选择器:li标签中的所有的a标签全部会被选中
	ul li a{
  	
	}

  子代选择器:li的直接子代a标签会被选中
	ul li > a{
  
	}
</style>

并集交集选择器

<div>交集选择器</div>
<div>交集选择器</div>
<div class="red">交集选择器</div>
<p>并集选择器</p>
<p>并集选择器</p>
<p class="red">并集选择器</p>
使用交集选择器:唯一的选中第一个class = red的div
div .red{
  color: red;
} 

使用并集选择器:
div,p{
  color:red;
}

伪类选择器

  • 未访问的链接:
    :link
    
    已访问的链接:
    :visited
    
    鼠标移动到链接上
    :hover
    
    选定的链接
    :active
    
       <style>
            /*未被点击*/
            a:link{
                font-size: 20px;
                text-decoration: none;
            }
            /*鼠标点击之后,还未松开鼠标*/
            a:active{
                color:  aqua;
                font-size: 40px;
                text-decoration: none;
            }
    
            /*被点击之后*/
            a:visited {
                color: #333333;
                font-size: 20px;
                text-decoration:none;
                font-weight: bold;
            }
            /*鼠标移动上之后*/
            a:hover{
                color: #f40;
            }
        </style>
    
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_66924.html
Html 基础 一