HTML简单学习笔记

来源：互联网发布：社会学常用数据库编辑：程序博客网时间：2024/06/05 13:15
HTML学习

菜鸟教程：
http://www.runoob.com/html/html-tutorial.html
html简单学习笔记
案例github地址：
https://github.com/xiaxveliang/Html_Demo
这里写图片描述
html标签定义的更像格式；
css确定的更像是样式；
<!DOCTYPE html><html><!-- head文档标题 --><head><!-- 使用中文需添加此meta --><meta charset="utf-8"><title>HTML_Test(runoob.com)</title></head><!-- body的内容显示在浏览器上 --><body> <!-- 标题 --><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><!-- 段落 --><p>段落标签用法</p><!-- HTML 水平线 --><hr><p>这个<br>段落<br>演示了折行效果</p><!-- HTML 水平线 --><hr><!-- 链接 --><a href="http://www.runoob.com">当前页面打开鸟教程网站</a><br><a href="http://www.runoob.com" target="_blank">新页面打开鸟教程网站</a><br><hr><!-- 图片 --><img src="images/logo.png" width="258" height="39" /><br><!-- 创建图片链接 --><a href="http://www.runoob.com"><img border="0" src="images/logo.png" alt="HTML 教程" width="258" height="39"></a></p><hr><!-- 加粗 --><b>加粗文本</b><br><!-- 斜体 --><i>斜体文本</i><br><hr><!-- 代码 --><code>这里是代码</code><br><hr><!-- 上标、下标 -->这是 <sub> 下标</sub> 和 <sup> 上标</sup><br><hr><!-- 表格 border为边框类型 去掉则无边框 --><table border="1">    <!-- 表格头 -->    <tr>        <th>Header 1</th>        <th>Header 2</th>    </tr>    <!-- 行 -->    <tr>        <td>row 1, cell 1</td>        <td>row 1, cell 2</td>    </tr>    <!-- 行 -->    <tr>        <td>row 2, cell 1</td>        <td>row 2, cell 2</td>    </tr></table><hr><!-- 无序列表 --><ul><li>无序列表1</li><li>无序列表2</li></ul><hr><!-- 有序列表 --><ol><li>有序列表1</li><li>有序列表2</li></ol><hr><!-- 自定义列表 --><dl><dt>自定义列表1</dt><dd>- black hot drink</dd><dt>自定义列表2</dt><dd>- white cold drink</dd></dl><hr><!-- 区块标签 --><div style="color:#0000FF">  <h3>区块标签中的标题</h3>  <p>区块标签中的段落</p></div><hr><!-- span标签用来组合文档中的行内元素 --><p>她有一双 <span style="color:blue;font-weight:bold">蓝色</span> 的大眼睛</p><hr><!-- 文本输入框 --><form>UserName: <input type="text" name="UserName"><br>PassWord: <input type="password" name="pwd"></form><hr><!-- 单选按钮 --><form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</form><hr><!-- 复选框 --><form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form><hr><!-- 提交按钮 --><form name="input" action="html_form_action.php" method="get">Username: <!-- 输入框 --><input type="text" name="user"><!-- 提交按钮 --><input type="submit" value="Submit"></form><hr><!-- 引入其他html文件 --><iframe src="1css.html" width="200" height="200" frameborder="0"></iframe><hr><iframe src="1css.html" width="200" height="200" frameborder="0" name="iframe_a"></iframe><p><a href="http://www.163.com" target="iframe_a">点击在上边的框中显示网易</a></p><hr><!-- 背景颜色 --><p style="background-color:#FFFF00">通过十六进制设置背景颜色</p><p style="background-color:rgb(255,255,0)">通过 rbg 值设置背景颜色</p><hr><!-- script标签 --><script>document.write("javascript输出内容");document.write("<h1>javascript输出一个标题</h1>");document.write("<p>javascript输出一个段落。</p>");</script><noscript>不支持 JavaScript 的浏览器会使用 &lt;noscript&gt; 元素中定义的内容（文本）来替代。</noscript><hr><p id="demo">点击按钮，替换此段落内容</p><script>function myFunction001(){    document.getElementById("demo").innerHTML="Hello JavaScript!";}function myFunction002(){    x=document.getElementById("demo") // 找到元素    x.style.color="#ff0000";          // 改变样式}</script><button type="button" onclick="myFunction001()">点我替换段落内容</button><button type="button" onclick="myFunction002()">点我更改段落字体颜色</button><hr></body></html>
0 0