wae42675
wae42675

HTML学习笔记整理

  • 基本框架：


<html>
---------------------------标题部分---------------------------------
<head>
<meta charset="utf-8">
<title>  网页名称  title>
<base> - 定义了所有链接的URL默认的链接目标地址


<link rel="stylesheet" type="text/css" href="mystyle.css">---------链接到外部样式表

<style type="text/css"> ---------直接添加样式来渲染 HTML 文档
body {background-color:yellow}
style>---------以上定义了该页面的标签的样式

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">------------为搜索引擎定义关键词
<meta name="description" content="Free Web tutorials on HTML and CSS">----------------为网页定义描述内容
<meta name="author" content="Hege Refsnes">------------定义网页作者
<meta http-equiv="refresh" content="30">-------------每30秒中刷新当前页面

head>

-------------------------------网页内容-----------------------------
<body>

<h1> 一级标题标签 h1>   ---------其他的如：<h2> 二级标题 h2>

<p style="color:blue;margin-left:20px;"> 段落标签 p>             ---------段落，使用内联样式


-------------------------链接及图片---------------------------------

<a href="http://www.XXX.com" target="_blank" style="text-decoration:none;" >这是一个链接a> ---------链接，在新标签中打开，样式：无下划线链接

<img src="w3cschool.png" width="104" height="142" alt="school"> ---------图像，alt 属性用来为图像定义一串预备的可替换的文本


-------------------------换行及水平线------------------------------

<br />    ---------换行
<p>这个<br>段落<br>演示了分行的效果p>

  ---------水平线

<q>引用标签q>----------------显示效果： “引用标签”


--------------------------列表与表格（具体内容见后面补充）--------------

<table border="1">---table>----------
<tr><td>普通单元格td>tr>----------用<th>替换<td>即为表头单元格

<ul>-------------无序列表，有序列表为<ol>，其他不变
<li>XXXli>---------单项内容   
ul>


---------------------------块元素------------------------------

<div id="X" style="X"> 元素，一个常见的用途是文档布局，与 CSS 一同使用可用于对大的内容块设置样式属性
<span id="X" style="X"> 元素，当与 CSS 一同使用时，可用于为部分文本设置样式属性。-----------一般id=container/header标题/menu菜单/content内容/footer脚注


---------------------------表单(具体见后面内容)-----------------------

<form action="">
XXX: <input type="text" name="xxx"><br>
form>


----------------------------其他显示框------------------------

<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0">iframe>------------------在同一个浏览器窗口中开辟一个框，显示另一个页面

<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COMa>p>---------------链接的target为iframe_a，即链接内容在iframe框架中显示



------------------------------web颜色------------------------------

216 种 Web 安全色作为 Web 标准被建议使用，使用格式为：  #000000 
或者直接使用规定的颜色名，如：Blue 对应  #0000FF


--------------------------脚本(具体见后面内容)------------------------

<script>
document.write("
这是一个标题
")------直接作为页面内容输出
script> 


---------------------------特殊定义-----------------------------
- 特殊符号：如<  >  等等有固定的输入，如： © 等同于 ©

body>
html>
  • 文本格式化：
<b> 加粗b>    或者使用： <strong> 加粗 strong>
<big> 放大 big>
<small> 缩小 small>

这个文本包含 <sub>下标sub> ----------数学符号a2  a<sub>2sub>
这个文本包含<sup>上标sup>------------数学符号X的平方   X<sup>2sup>

<p><bdo dir="rtl">该段落文字从右到左显示。bdo>p>  

<p>My favorite color is <del>bluedel> <ins>redins>!p>   ---------显示效果：blue：删除，red:插入（删除文字中间划线，插入文字下划线）
----------
利用pre标签进行文本格式化（控制空格和换行）：
<pre>含空格  文本区域pre>----------显示效果在网页中也将有空格和换行
  • 在HTML中添加 id：————–帮助链接到文档中的特定部分
<a id="tips">有用的提示部分a>
<a href="#tips">访问有用的提示部分a>
<a href="http://www.runoob.com/html/html-links.html#tips">
从另外一个页面访问有用的提示部分a>
  • 链接内容：
--------------------head当中定义默认链接目标地址------------
<base> - 定义了所有链接的URL默认的链接目标地址
     示例：<base href="//www.runoob.com/images/" target="_blank">
          <body>
          <img src="logo.png">该图片的访问地址为"https://www.runoob.com/images/logo.png"
          <a href="//www.runoob.com">链接会在新窗口打开,等于添加了target="_blank"


-------------------------链接样式---------------------

<a href="http://www.XXX.com" target="_blank" style="text-decoration:none;" >这是一个链接a> ---------链接，在新标签中打开，样式：无下划线链接
<a href="//www.runoob.com/html/html-tutorial.html"><img border="0" src="smiley.gif" alt="XXX" width="32" height="32">a>-------无边框的图片链接

------------------------邮箱链接-------------------------

<a href="mailto:[email protected]?Subject=Hello%20again" target="_top">发送邮件a>------------电子邮件链接，注意: 单词之间空格使用 %20 代替

--------------------------图片链接----------------------------


<a href="//www.runoob.com/html/html-tutorial.html"><img border="0" src="smiley.gif" alt="XXX" width="32" height="32">a>-------无边框的图片链接



<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
map>
  • 使用样式的几种方式：
<link rel="stylesheet" type="text/css" href="mystyle.css">---------链接到外部样式表

<style type="text/css"> ---------直接添加样式来渲染 HTML 文档
body {background-color:yellow}
h1 {color:red;}
p {color:blue;}
style>---------以上定义了该页面的body h1 p标签的样式

<p style="color:blue;margin-left:20px;">链接p> 
<h2 style="background-color:red;">这是一个标题h2>--------直接在标签中使用内联样式 ，格式："XXX:xxx;XXX:xxx……"；
属性可以用到：使用background-color定义背景色 
        ---使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式
        ---text-align（文字对齐）属性指定文本的水平与垂直对齐方式
  • 表格标签
<table border="1" cellpadding="10" cellspacing="10">--------------
    <tr>
        <th>Header 1th>----------表头（横向，也可以竖向，总之注意好th,td的位置摆放关系就好）
        <th>Header 1th>
    tr>
    <tr>
        <td>row 1, cell 1td>----------单元格
        <td>row 1, cell 1td>
    tr>
table>

<th colspan="2">Telephoneth> -------跨两列的横向表头
<th rowspan="2">Telephone:th>-----------跨两行的竖向表头

每个单元格内同样可以包含其他标签
  • 列表标签：
<ul>-------------无序列表，有序列表为<ol>，其他不变
<li>XXXli>---------单项内容   
ul>


----------设定列表样式-----
<ol type="X">---------有序可以设定方式：type="A"：ABC；type="a"：abc；type="I"：罗马数字序列；type="i"：小写罗马数字序列；

<ul style="list-style-type:xxx">-----------无序列表可以设定方式：style="list-style-type:disc":圆点列表---circle:圆圈列表---square:正方形列表


<ul>-----------嵌套列表-----------------------
  <li>Coffeeli>
    <ul>   -------------内部的嵌套
      <li>Black teali>
    ul>
  li>
  <li>Milkli>
ul>


<dl>--------------自定义列表-----------------
  <dt>Coffeedt>
      <dd>- black hot drinkdd>
  <dt>Milkdt>
      <dd>- white cold drinkdd>
dl>
  • 表单标签：
<form action="MAILTO:[email protected]" method="post" enctype="text/plain">-----------发送邮件


-------------------------输入框------------------------------

First name: <input type="text" name="firstname"><br>-----text:默认宽度为20个字符

Password: <input type="password" name="password">--------密码字段：字符是隐藏的(显示为星号或圆圈)

<input list="browsers" name="browser">-------输入框（带下拉）
<datalist id="browsers">--------------下拉的可能输入值（根据输入调整）
  <option value="Internet Explorer">
  <option value="Firefox">
datalist>


--------------------------下拉框------------------------------

<select name="cars">------------------下拉列表
<option value="volvo">Volvooption>-----下拉选项
<option value="fiat" selected>Fiatoption>--------可选：设为预选项

<select>----------------选择框
  <optgroup label="Swedish Cars">-------------把相关的选项组合在一起
    <option value="volvo">Volvooption>
    <option value="saab">Saaboption>
  optgroup>
  <optgroup label="German Cars">------------------相关选项
    <option value="mercedes">Mercedesoption>
    <option value="audi">Audioption>
  optgroup>
select>

<textarea rows="10" cols="30">文本框textarea>--------文本框区域


------------------------------按钮---------------------------------

<input type="radio" name="sex" value="male">Male<br>----------单选按钮：同name只能选一个

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>--------------------复选按钮，同name可选多个

<input type="submit" value="Submit">--------提交按钮

<input type="button" value="Hello world!">----------按钮

<input type="reset" value="重置">--------------重置按钮

form>


-------------------------带边框的form表单--------------------------

<form action="">
<fieldset>--------------------定义了一组相关的表单元素，并使用外框包含起来
<legend>标题：legend>-------------   定义了 <fieldset> 元素的标题
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
fieldset>
form>


------------------------实时输出结果表单-----------------------------

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">100--------带滚动条默认从0~100内的值
+<input type="number" id="b" value="50">---------数值输入框
=<output name="x" for="a b">output>---------------输出结果
form>
  • 脚本标签：
<script>
document.write("
这是一个标题
")------直接作为页面内容输出
script> 

<noscript><p>抱歉，你的浏览器不支持 JavaScript!p>noscript>--------------------------只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容


---------------------------定义脚本函数----------------------------
<script>
function myFunction()-------------脚本函数点击后显示"Hello JavaScript!"
{
    document.getElementById("demo").innerHTML="Hello JavaScript!";
}
script>
<button type="button" onclick="myFunction()">点我！button>


---------------------------另一个例子：----------------------------
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
p>
<script>
function myFunction()------------------点击后将字体变为红色
{
    x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000";          // 改变样式
}
script>
<button type="button" onclick="myFunction()">点击这里button>

你可能感兴趣的:(web前端)