HTML前端笔记

HTML标记语言:

标记的格式

<标记 属性="属性值"></标记>

文档注释  <!-- -->

空格键和回车键不会影响页面!

<html><html/> 在网页的最前面和坐后面文件头标记

<head><head/>标记的内容不会在浏览器中显示  里面放<title></title>标签

<body></body> 是网页的主题部分,再次标记之间可以包含<p></p>

常用属性:  1.bgcolor  设置背景颜色 2.text 文本颜色  3. link 连接颜色  vlink 已经连接的颜色

4.alink 正在点击的链接颜色

<meta></meta>  提供页面相关的元信息   属性  1.content  2.name

<html>
<!--网页头标记-->    
    <head>
        <!-- 网页名 -->
        <title>这是我的网页名</title>
        <!-- 设置编码字符集根据编码工具的格式变化 meta添加到head标记里面-->
        <meta charset="UTF-8">
        <meta name="keywords" content="卜,卜">
    </head>
    <!--bgcolor:网站背景颜色  text网站字颜色   link 超链接颜色   vlink 已经访问的颜色  alink 点击下变颜色-->
    <body bgcolor="red" text="blue" link="blue" vlink="green" alink="yellow">
        <!-- 超链接标记 href 指定属性 -->
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.taobao.com">淘宝</a>
        这是我的网页的主题内容
    </body>
</html>

  格式标记

<br> 换行标记单标记

<p></p>标记 段落两个<p></p>会有间隔

<center></center>在网页中间显示

<pre></pre> 按照字体排版来显示

<li></li> 列表项目标记

表单标记:

<form></form>  属性:action="服务器的地址" name="表单的名称"  method="请求的方式"  enctype =" 表单传输的编码格式"  target ="用来指定地址类似于超链接"

  <Input > 单标记 属性 : name="提交到后台的key"   type="默认是一个文本输入域"  value="当浏览器打开的时候默认的值"   ,当 type="password" 的时候 是一个密文输入域   当type="submit" 是就是一个提交按钮 ;size="5" :表示控件长度  maxlength="12"文本框中最大允许的值

<html>
<!-- 头信息 -->
<head>
    <!-- 标题-->
    <title>表单的设计demo</title>
    <!-- 字符集编码-->
    <meta charset="utf-8">
</head>
    <body>
      <!-- 表单属性  action 传输数据的地址 可以是一个页面,也可以是 no,默认传输的是当前页面 表单的名称 method 传输方式-->
      <form  name="from" method="POST">
        <!--type 文本内的属性 值为 text 为名文文本,password 为密文形式-"*****" value 为默认的显示值 name 属性:为后台接受的name值 -->
        用户名:<input type="text" name="username" value="请输入用户名和密码" maxlength="12" minlength="6"><br><br> 
        密&#8195;码:<input type="password">
      <!-- 单选框 name值一样就会起到一个去重的效果-->
      性&#8195;别:<input type="radio" name="sex" value="男" checked> 男
      <input type="radio" name="sex" value="女">女  <br>
      <!-- 复选框 checkbox 属性  checked默认选中的-->
      爱&#8195;好:<input type="checkbox" checked>体育
      <input type="checkbox" checked>看书

      <input type="checkbox" checked>打豆豆 <br>
      <!--隐藏域 hidden-->
      <input type="hidden" value="隐藏" >
      <br>
      <!--多行文本-->
      自我介绍:<textarea cols="5" rows="10" name="自我介绍"></textarea>
      <!--菜单下拉列表框 multiple多选框-->
      地址:
      <select name="address" multiple>
                 
        <option value="成都">成都</option>
        <option value="sichuan">四川</option>
        <option value="shanghai">上海</option> 
        

      </select>
      <br>
      <!--提交 submit属性-->
      <input type="submit" value="提交">
      <!-- 重置 reset属性-->
      <input type="reset" value="重置">
      <!-- 普通按钮 button属性-->
      <input type="button">
     
      </form>

    </body>

</html>

css 元素选择器

<html>
<!-- 头信息 -->

<head>
  <!-- 标题-->
  <title>表单的设计demo</title>
  <!-- 字符集编码-->
  <meta charset="utf-8">
  <style>
    /* 伪元素选择器 link 正常连接 hover 鼠标放上去  active 链接时的样式 visited已访问的  */
      a:link{color: aqua}
      a:hover{color:black}
      a:active{color:blue}
      /* 已经访问 */
      a:visited{color:yellow}
     

    </style>
</head>

<body>

  <a href="http://www.baidu.com">百度</a>
  <a href="http://www.baidu.com">百度dddd</a>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/adminBfl/article/details/83003681