HTML基本元素_【lsp去掉文字274】-CSDN博客

本文链接：https://blog.csdn.net/weixin_50589485/article/details/117213324

(&nbsp不断行的空白格半角的空白&ensp;或  全角的空白&emsp;或 )

HTML&HTML5

1.HTML element

`<h1>`开始标签；

`</h1>`结束标签；

`<h2>`二级标题;

`<p>` `</p>`表示一个自然段的开始与结束；

lorem ipsum text用作占位符，即占着位置并没有实际意义的文字，指一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。

``注释（Comment）

`<main></main>`内部嵌套有两个子元素的元素

`<img src="" alt="">`src指向特定图片的地址

img元素是自动关闭的。所有img元素都必须有alt属性。alt属性中的文本用于屏幕阅读器以提高可访问性，并在图像加载失败时显示。注意:如果图像纯粹是装饰性的，最好使用空的alt属性。理想情况下，除非需要，alt属性不应包含特殊字符。

<a href>``</a>元素链接到网页之外（external）的内容。

元素需要一个名为href属性的目的网址。他们还需要anchor文本。

<h1>Hello World</h1>

<h2>CatAPP</h2>

<main>
    <p>Click here to view more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a>.</p>
    <!--target一句使得链接文档在新的窗口选项卡中打开-->
    <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
    <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

</main>
<footer>Copyright Cat Photo App</footer>

`<a href="# ">`内部链接，以跳转到网页中的不同部分。

要创建内部链接，请分配链接的href属性设置为哈希符号#加上id属性，通常位于页面的更下方。然后您需要添加相同的id属性添加到要链接的元素中。不定冠词id是唯一描述元素的属性。

<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2

`<a href="#">`链接嵌套（nest）

通过将元素嵌套在a元素中，可以将元素变成链接。将图像嵌套在a元素中。请记住使用#作为a元素的href属性，以便将它变成一个死链接(dead link)。

<p>Click here to view more <a href="#">cat photos</a>.</p>
...
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<ul>``</ul>无序列表，或项目符号风格的列表。

无序列表以一个开头的< ul >元素开始，后跟任意数量的< li >元素。最后，无序列表以一个</ul>结束

<ol>``</ol>有序列表

<p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>

`<input type="input" placeholder="" required>`输入框（Text Field）

占位符文本(Placeholder Text)是在用户输入任何内容之前显示在输入元素中的内容。span><required>在不填写此字段的情况下无法提交表单。

<input type="text" placeholder="cat photo URL" required>

`<form>`网络表单(web form)。

向服务器提交数据。可以通过在表单元素上指定操作来实现这一点。

表单中经常出现input标签，它可以用来创建多种表单控件。它的type属性指定了所要创建的input标签类型。

<form action="https://freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
  </form>

`<button type=""></button>`按钮

<button type="submit">Submit</button>

Radio Button，单选按钮，一种input

CheckBox，复选框，一种input

每个单选按钮都可以嵌套在自己的label元素中。通过将input元素包装在元素内部，label它将自动将单选按钮输入与其周围的标签元素相关联。

所有相关的单选按钮应具有相同的name属性以创建单选按钮组。通过创建单选按钮组，选择任何一个单选按钮将自动取消选择同一组中的其他按钮，从而确保用户仅提供一个答案。

设置label元素的for属性，该值相匹配input元素的id的属性。这允许辅助技术在标签和子input元素之间创建链接关系。

如果您忽略value属性，提交的表单数据使用默认值，即on。在这种情况下，如果用户单击“室内并提交表单，生成的表单数据将是indoor-outdoor = on，这是没有用的。所以value属性需要设置为某个值来标识选项。

checked属性默认选择第一个选项.

<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>

<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label>